download me at http://t.wits.sg

Progress Bars & Controls

Default Multicolored Bar75%
Yellow Bar35%
Orange Bar (No Text)55%
Red Bar (No Text)85%
Default Multicolored Bar with max value of 200032
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'} );
	$(".pb5").progressBar({ max: 2000, textFormat: 'fraction', callback: function(data) { if (data.running_value == data.value) { alert("Callback example: Target reached!"); } }} );
	$("#uploadprogressbar").progressBar();
});

Progress Bars Form Example

Download the PHP Source here
*
*
*

0%

Upload Form Javascript:


var progress_key = '53da445b0b450';

// 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();

	var i = setInterval(function() { 
		$.getJSON("demo.php?id=" + progress_key, function(data) {
			if (data == null) {
				clearInterval(i);
				location.reload(true);
				return;
			}

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