使用NProgress.js制作一个相对准确的网页加载进度条

引入：

<link href="https://www.haohaokan17.com/js/nprogress.css" rel="stylesheet" />
<script src="https://www.haohaokan17.com/static/js/jquery.min.js"></script>
<script src="https://www.haohaokan17.com/js/nprogress.js"></script>

html:

<div class="progress">   
  <div></div>
</div>

css:

<style>
    .progress {   width: 100%;   height: 1px; } 
    .progress div {   width: 0;   height: 100%;   background: green; transition: width .5s;}
</style>

js:

document.addEventListener('readystatechange', function () {   
  if(document.readyState === 'interactive') {     
     document.querySelector('.progress div').style.width = '33%'  
  }    
  if(document.readyState === 'complete') {
     document.querySelector('.progress div').style.width = '66%'   
  } 
} ) 
window.onload = function () {
   document.querySelector('.abc div').style.width = '100%' 
}

添加以上代码就可以给你的网站添加一个进度条了。