jquery 进度插件 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); }); });