正文

页面加载的进度条效果相信大家都仰慕已久,下面是我编写的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是去缓存刷新,刷新后,看看刷新网页,顶部是不是出现了加载进度条了...

Last modification:May 12th, 2020 at 03:53 pm
如果觉得我的文章对你有用,请随意赞赏