[WordPress开发]主题页面顶部实现加载进度条

wordpress html5加载进度条插件

这几天有朋友问有一些网站的顶部在进入时顶部会出现一个横向的进度条,可以以动画的形式显示网站加载的进度,柠檬看了一眼,盘他。

这个进度条实际上是非常简单的,就是html5加上css3动画和jq脚本制作完成的,代码非常简单,你可以自己整整合到网站中(下面有教程说明)

教程开始

将如下css样式粘贴到主题的css文件例:diy.css/style.css

/*加载进度条*/
#progress {position:fixed;height: 2px;background:#2954fd;transition:opacity 500ms linear; z-index:1000000; top:0;}
#progress.done {opacity:0 }
#progress span { position:absolute; height:2px;-webkit-box-shadow:#2954fd 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 }}
/*加载进度条*/

将如下代码粘贴放入到主题的footer.php文件

<div id="progress"><span></span></div><script language="javascript">    $({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");
}
}
});</script>

保存完成之后,进度条功能就完整的整合进入你的网站了,而不需要使用插件,因为都是保存在主题中。

活学活用吧,上面设置的时间是3秒,根据自己的需求设定时间吧,到了这步,wordpress主题页面顶部加载进度条的实现就出现了,做为想学习者,我想你应该知道ctrl+f5是去缓存刷新,刷新后,看看刷新网页,顶部是不是出现了加载进度条了。。恩,就是这样!

给TA打赏
共{{data.count}}人
人已打赏
投稿专区

[WordPress安全]修改wp-admin隐藏后台管理登录地址确保WordPress网站后台安全

2020-4-23 15:51:57

投稿专区

[WordPress开发]登录界面样式优化

2020-4-23 15:51:59

下载说明

  • 1、绅士视界所提供的压缩包若无特别说明,解压密码均为wysacg.top
  • 2、下载后文件若为压缩包格式,请安装7Z软件或者其它压缩软件进行解压;
  • 3、部分资源后缀为 .wys 请自行修改为 .7z
  • 4、资源可能会由于内容问题被和谐,遇到此问题,请到文章页面进行反馈,以便无言及时进行更新;

站长声明

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有;若为付费资源,请在下载后24小时之内自觉删除;若作商业用途,请到原网站购买;由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索