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); }); });
from: http://digitalbush.com/projects/progress-bar-plugin