Progress Bars & Controls

Default Multicolored Bar	75%
Yellow Bar	35%
Orange Bar (No Text)	55%
Red Bar (No Text)	85%
Default Multicolored Bar with max value of 2000	32

Some controls: 20 | 40 | 60 | 80 | 100

Usage:

$(document).ready(function() {
	$("#pb1").progressBar();
	$("#pb2").progressBar({ barImage: 'images/progressbg_yellow.gif'} );
	$("#pb3").progressBar({ barImage: 'images/progressbg_orange.gif', showText: false} );
	$("#pb4").progressBar(65, { showText: false, barImage: 'images/progressbg_red.gif'} );
	$("#uploadprogressbar").progressBar();
});

Progress Bars Form Example

Download the PHP Source here

Upload Form Javascript:

var progress_key = '';

// this sets up the progress bar
$(document).ready(function() {
	$("#uploadprogressbar").progressBar();
});

// fades in the progress bar and starts polling the upload progress after 1.5seconds
function beginUpload() {
	// uses ajax to poll the uploadprogress.php page with the id
	// deserializes the json string, and computes the percentage (integer)
	// update the jQuery progress bar
	// sets a timer for the next poll in 750ms
	$("#uploadprogressbar").fadeIn();

	setInterval(function() {
		$.getJSON("demo.php?id=" + progress_key, function(data) {
			if (data == null)
				return;

			var percentage = Math.floor(100 * parseInt(data.bytes_uploaded) / parseInt(data.bytes_total));
			$("#uploadprogressbar").progressBar(percentage);
		});
	}, 1500);
}