JQuery preloader progress bar: How to make it automated and show first

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

This part will allow it run run as soon as the page starts loading:


jQuery(function ($) {
    ...
});

So let’s see - the progress bar seems to be started with this command:


handle = setInterval(update, 100);

and stopped with this one:


clearInterval(handle);

So to automatically start it when the page starts loading, and to stop it when it finishes loading, it should be as simple as doing something like this:


jQuery(function ($) {
    handle = setInterval(update, 100);
    $(document).on('load', function () {
        clearInterval(handle);
    });
});

Thank you for your answer. Appreciated. However, I replaced this part of my code:
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);
});
});

with your suggested code, but the bar does not load at all. I only see the empty div. Any suggestions on the rest of the JS code which still reference to the button id’s and values(start, run, reset etc.)?