网页头部加一个网页加载进度条，看起来还是挺有意思的。其实制作很简单，只需要用JS监听网页加载进度即可。
使用jQuery
$({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%后消失
}
}
});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
}
}网页可以用JS在body头部插入一个元素，作为进度条，不想那么麻烦，也可以直接写代码
<body> <div id="progress"> <span><span> </div> <body>
© 版权声明
本站网站名称：追月流涟教程网
本站永久网址：https://www.zyds666.cn
网站侵权说明：
本站采用 CC BY-NC-SA 4.0 国际许可协议 进行许可，转载或引用本站文章应遵循相同协议。
1、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长QQ进行删除处理。
2、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
3、本站禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报。
4、本站资源大多存储在云盘，如发现链接失效，请联系我们将会第一时间更新。
站长邮箱：abcdefghijklm1211@qq.com
1、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长QQ进行删除处理。
2、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
3、本站禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报。
4、本站资源大多存储在云盘，如发现链接失效，请联系我们将会第一时间更新。
站长邮箱：abcdefghijklm1211@qq.com
还没有评论，来说两句吧...