Progress Bar Plugin

from: http://digitalbush.com/projects/progress-bar-plugin

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);
        });
});