Below I have a jquery progress bar (see code). Now currently it loads using a start/stop button function. I want it to load automatically first thing before all the other elements of my website loads, since it is a progress bar after all. I want it to start the moment the web page starts to load and I want it to stop the moment the content of the webpage starts showing. (Just to show progress during that white screen waiting period…)
My code:
JS:
<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>
HTML:
<div id=“progressbar”></div>
<input type=“button” id=“run” value=“start”></input>
<input type=“button” id=“reset” value=“reset”></input>
CSS:
#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;
}
Would Appreciate any help. Thanks