Hot!Ajax

<SCRIPT src="http://www.hotajax.org/download/jquery/progress bar/Progress Bar/jquery.js" 

type=text/javascript></SCRIPT>
<p> </p>
<p><SCRIPT 

 src="http://www.hotajax.org/download/jquery/progress bar/Progress Bar/jqueryprogressbar.js" 

 type=text/javascript></SCRIPT></p>
   

<STYLE>#progressbar {

BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; 
BORDER-LEFT: black 1px solid; WIDTH: 200px; 

COLOR: black; BORDER-BOTTOM: black 1px solid; POSITION: relative; HEIGHT: 20px

}

#progressbar DIV.progress {

OVERFLOW: hidden; WIDTH: 0px; POSITION: absolute; HEIGHT: 100%; BACKGROUND-COLOR: #369

}

#progressbar DIV.progress .text {

COLOR: white; POSITION: absolute; TEXT-ALIGN: center

}

#progressbar DIV.text {

WIDTH: 100%; POSITION: absolute; HEIGHT: 100%; TEXT-ALIGN: center

}

</STYLE>
   

<SCRIPT type=text/javascript>

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

});

});

</SCRIPT>
   

<DIV id=progressbar></DIV><INPUT id=run type=button value=start> <INPUT id=reset type=button value=reset>