分享一个网页头部加一个网页加载进度条，类似于本站网站顶部所使用的效果，随着鼠标滚动不断前进，看起来还是挺有意思的。其实制作很简单，只需要用JS监听网页加载进度即可。
效果如图：
$({property: 0}).animate({property: 100}, {
duration: 5000,//进度条加载进度的速度
step: function() {
var percentage = Math.round(this.property);
$('#progress').css('width', percentage+"%");
if(percentage == 100) {
$("#progress").addClass("done");//100%后消失
}
}
});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
}
}网页可以用JS在body头部插入一个元素，作为进度条，不想那么麻烦，也可以直接写代码
<body> <div id="progress"> <span><span> </div> <body>
nprogress是一个jQuery插件，只有几K大小。使用起来非常方便和简单。先引入
<script src='nprogress.js'></script> <link rel='stylesheet' href='nprogress.css'/>
控制显示，下面这两句代码，分别放到页面开头和网页加载完成事件里面即可。
NProgress.start();//开始加载进度条 NProgress.done();//停止显示进度条
控制进度条的速度
NProgress.set(0.0); // Sorta same as .start() NProgress.set(0.4); NProgress.set(1.0); // Sorta same as .done()
https://ricostacruz.com/nprogress/
文章版权声明
1 本网站名称：忆路吧
2 本站永久网址：http://www.Yiluxb.cn
3 本网站的文章部分内容来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ进行删除处理。
4 本站资源仅供学习和交流使用，版权归原作者所有，请在下载后24小时之内自觉删除。
5 本站大部分下载资源收集于网络，不保证其完整性以及安全性，不提供技术支持，请下载后自行研究。
6 若作商业用途，请购买正版，由于未及时购买和付费发生的侵权行为，使用者自行承担，概与本站无关。
2 本站永久网址：http://www.Yiluxb.cn
3 本网站的文章部分内容来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ进行删除处理。
4 本站资源仅供学习和交流使用，版权归原作者所有，请在下载后24小时之内自觉删除。
5 本站大部分下载资源收集于网络，不保证其完整性以及安全性，不提供技术支持，请下载后自行研究。
6 若作商业用途，请购买正版，由于未及时购买和付费发生的侵权行为，使用者自行承担，概与本站无关。
还没有评论，来说两句吧...