JavaScript implements refresh of the progress bar in the head of the web page

This article mainly introduces JavaScript to implement the example code of refreshing the progress bar of the web page header. It is very good and has reference value. Friends in need can refer to it.

The header will appear when refreshing the article, because it does not It is not really involved in the rendering process of whether the browser loading is complete, so it is just an appearance. It does not mean that the browser has finished loading all resources after the display is completed.

Rendering:

First look at the html:

Only two tags

<p id="barbg">
   <p id="bar">
   </p>
  </p>

CSS:

The layout is also very simple

 <style>
   *{margin:0;padding:0;}
   #barbg{height:5px; background:rgb(149,143,143)}
   #barbg p{width:0; height:5px; position:relative; background:rgb(230,10,10);}
  </style>

JS

Then the native JS is like this

 <script>
   document.onreadystatechange = function(){
    var bar = document.getElementById(&#39;bar&#39;);
    var barbg = bar.parentNode;
    var wd = document.body.scrollWidth || document.documentElement.scrollWidth;
    var t = 10;
    var d = 0;
    var i = 0;
    var timer = setInterval(goto,10);
    function goto(){
     d = d + t ;
     bar.style.width = d + &#39;px&#39;;
     if(d >= wd){
      clearInterval(timer);
      bar.style.background = &#39;rgba(230,10,10,0)&#39;;
      none();
     }
    }
    function none(){
     var a = 10 - i;
     i++;
     if(a != 0 && a != 10){a = a * 0.1}
     if(a === 10){a = 1}
     if(a === 0){a = 0}
     barbg.style.background = &#39;rgba(230,10,10,&#39; + a + &#39;)&#39;;
     if(a === 0){barbg.style.display = &#39;none&#39;}
     if(a != 0){setTimeout(none,50);}
    }
   }
  </script>

The above is the detailed content of JavaScript implements refresh of the progress bar in the head of the web page. For more information, please follow other related articles on the PHP Chinese website!