jquery進捗プラグインProgress Bar Plugin
2463 ワード
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);
});
});