使用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%'
}添加以上代码就可以给你的网站添加一个进度条了。