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主题页面顶部加载进度条的实现

发表评论

提供最优质的资源集合

立即查看 了解详情