網(wǎng)頁頭部加一個(gè)網(wǎng)頁加載進(jìn)度條，看起來還是挺有意思的。其實(shí)制作很簡單，只需要用JS監(jiān)聽網(wǎng)頁加載進(jìn)度即可。
使用jQuery
$({property: 0}).animate({property: 100}, {
duration: 5000,//進(jìn)度條加載進(jìn)度的速度
step: function() {
var percentage = Math.round(this.property);
$('#progress').css('width', percentage+"%");
if(percentage == 100) {
$("#progress").addClass("done");//100%后消失
}
}
}); css代碼
body{
margin:0;
}
#progress {
position:fixed;
height: 2px;
background:#b91f1f;
transition:opacity 500ms linear
}
#progress.done {
opacity:0
}
#progress span {
position:absolute;
height:2px;
opacity:1;
width:150px;
right:-10px;
}
@-webkit-keyframes pulse {
30% {
opacity:.6
}
60% {
opacity:0;
}
100% {
opacity:.6
}
} 網(wǎng)頁可以用JS在body頭部插入一個(gè)元素，作為進(jìn)度條，不想那么麻煩，也可以直接寫代碼
<body>
<div id="progress">
<span><span>
</div>
<body> 使用插件
nprogress是一個(gè)jQuery插件，只有幾K大小。使用起來非常方便和簡單。
先引入
<script src='nprogress.js'></script>
<link rel='stylesheet' href='nprogress.css'/>控制顯示，下面這兩句代碼，分別放到頁面開頭和網(wǎng)頁加載完成事件里面即可。
NProgress.start();//開始加載進(jìn)度條
NProgress.done();//停止顯示進(jìn)度條控制進(jìn)度條的速度
NProgress.set(0.0); // Sorta same as .start()
NProgress.set(0.4);
NProgress.set(1.0); // Sorta same as .done()下載和dome
https://ricostacruz.com/nprogress/
