Progress Bar Plugin

Download Latest (Alpha 1)

Overview

This is a progress bar plugin for jQuery.

Usage

First, include the progress bar javascript file.
<script src="jquery.progressbar.js" type="text/javascript"></script>
Next, include the styles necessary to render the progress bar correctly.
	
/* progress bar container */
#progressbar{
	border:1px solid black;
	width:200px;
	height:20px;
	position:relative;
	color:black; 
}
/* color bar */
#progressbar div.progress{
	position:absolute;
	width:0;
	height:100%;
	overflow:hidden;
	background-color:#369;
}
/* text on bar */
#progressbar div.progress .text{
	position:absolute;
	text-align:center;
	color:white;
}
/* text off bar */
#progressbar div.text{
	position:absolute;
	width:100%;
	height:100%;
	text-align:center;
}
Finally make the call to render the progress bar.
$("#progressbar").reportprogress(0);
In the demo below I'm running the progress bar from a timer like so.
var pct=0;
var handle=0;
function update(){
	$("#progressbar").reportprogress(++pct);
	if(pct==100){
		clearInterval(handle);
		$("#run").val("start");
		pct=0;
	}
}
jQuery(function($){
	$("#run").click(function(){
		if(this.value=="start"){
			handle=setInterval("update()",100);
			this.value="stop";
		}else{
			clearInterval(handle);
			this.value="start";
		}
	});
	$("#reset").click(function(){
		pct=0;
		$("#progressbar").reportprogress(0);
	});
});

Demo