WordPress网站上方添加一个加载进度条

正文

页面加载的进度条效果相信大家都仰慕已久，下面是我编写的wordpress实现顶部加载进度条，简简单单，就可实现酷炫的页面加载进度条效果...

wordpress顶部加载进度条的实现，我第一时间能想到的就是css了，但是可能对IE低版本的浏览器兼容性不好了，但是玩wordpress的，基本上都无视IE了，那么下面我就直接发上教程吧...

CSS代码

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
                }
}

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是去缓存刷新，刷新后，看看刷新网页，顶部是不是出现了加载进度条了...