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

热门标签

, ,

@西城知道

知道君想做你的男闺蜜,和你聊聊情感、风月、人间事,以及生活的一点趣致...

前往微博
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是去缓存刷新,刷新后,看看刷新网页,顶部是不是出现了加载进度条了…

本文最后更新于2018年10月25日,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言xichengyouju#163.com(#换成@)反馈,我们会及时处理,谢谢!

未经允许不得转载:作者:知道君, 转载或复制请以 超链接形式 并注明出处 夏末浅笑
原文地址:《WordPress网站上方添加一个加载进度条》 发布于2018-10-18

分享到:
赞(0) 喝一杯咖啡

评论 1

评论前必须登录!

  注册

  1. #1

    文章不错非常喜欢

    女装品牌2年前 (2018-10-18)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

下载说明
评论下载是需要人工审核后才能下载的!!!建议QQ授权登录后再评论。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册