小爱wordpress主题页面顶部加载进度条的实现
wordpress主题页面顶部加载进度条的实现，大叔第一时间能想到的就是css3了，但是可能对IE低版本的浏览器兼容性不好了，但是玩wordpress的，都无视IE了哈，那么，下面我就直接说教程吧，简单粗暴，css3+JQ了辣。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
body{
margin:0;
}
#progress {
position:fixed;
height: 2px;
background:#2085c5;
transition:opacity 500ms linear
}
#progress.done {
opacity:0
}
#progress span {
position:absolute;
height:2px;
-webkit-box-shadow:#2085c5 1px 0 6px 1px;
-webkit-border-radius:100%;
opacity:1;
width:150px;
rightright:-10px;
-webkit-animation:pulse 2s ease-out 0s infinite;
}
@-webkit-keyframes pulse {
30% {
opacity:.6
}
60% {
opacity:0;
}
100% {
opacity:.6
}
}
|
对的，仅针对针对webkit内核浏览器写的，处女座的你，可以适当的多写一些前缀。
HTML代码
|
1
2
3
|
<div id=”progress”>
<span></span>
</div>
|
jquery代码
|
1
2
3
4
5
6
7
8
9
10
|
$({property: 0}).animate({property: 100}, {
duration: 3000,
step: function() {
var percentage = Math.round(this.property);
$(‘#progress’).css(‘width’, percentage+”%”);
if(percentage == 100) {
$(“#progress”).addClass(“done”);//完成，隐藏进度条
}
}
});
|
活学活用吧，上面设置的时间是3秒，根据自己的需求设定时间吧，到了这步，wordpress主题页面顶部加载进度条的实现就出现了，做为想学习者，我想你应该知道ctrl+f5是去缓存刷新，刷新后，看看刷新网页，顶部是不是出现了加载进度条了。。恩，就是这样！
严正声明：本站只出售html页面效果模板，不提供任何类型的网站内容数据，模板仅供学习交流使用，不得用于任何商业以及触犯国家法律法规的用途，违者需自行承担全部责任，与本站无以及模板设计作者无关，本站以及模板作者不承担任何连带责任！！！！
关爱邦 | 网站源码程序下载_免费商业源码分享！ » wordpress主题页面顶部加载进度条的实现
关爱邦 | 网站源码程序下载_免费商业源码分享！ » wordpress主题页面顶部加载进度条的实现
