JavaScript to refresh the webpage header progress bar

This article mainly introduces the implementation of JavaScript to refresh the instance code with the progress bar of the web page header, which is very good and has reference value, for more information about how to use JavaScript to refresh the instance code, see the next article.

This refresh will appear in the header, because it is not really involved in the rendering process of loading the browser, so it is just a representation, it doesn't mean that the browser loads the resources after the display is complete.

:

CSS:

The layout is also very simple.

JS

That's what native JS says.

 《script》   document.onreadystatechange = function(){    var bar = document.getElementById('bar');    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 + 'px';     if(d >= wd){      clearInterval(timer);      bar.style.background = 'rgba(230,10,10,0)';      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 = 'rgba(230,10,10,' + a + ')';     if(a === 0){barbg.style.display = 'none'}     if(a != 0){setTimeout(none,50);}    }   }  《script》

The above is the details about how JavaScript refreshes the page header progress bar. For more information, see other related articles in the first PHP community!