title: Jquery progress bar: How to activate it on document loading/initiation
body: <p>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...)</p>
  
  <p>My code:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  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);
      });
  });
  &lt;/script&gt; 
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="progressbar"&gt;&lt;/div&gt;
  &lt;input type="button" id="run" value="start"&gt;&lt;/input&gt;
  &lt;input type="button" id="reset" value="reset"&gt;&lt;/input&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#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;
  }
  </code></pre>
  
  <p>Would Appreciate any help.
  Thanks</p>