wordpress主题页面顶部加载进度条的实现,大叔第一时间能想到的就是css3了,但是可能对IE低版本的浏览器兼容性不好了,但是玩wordpress的,都无视IE了哈,那么,下面我就直接说教程吧,简单粗暴,css3+JQ了辣。
CSS3
-
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代码
-
<div id=”progress”>
-
<span></span>
-
</div>
jquery代码
-
$({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是去缓存刷新,刷新后,看看刷新网页,顶部是不是出现了加载进度条了。。恩,就是这样!
觉得文章有用就打赏一下文章作者
微信扫一扫打赏