当前位置: 首页 > 教程资源 > 正文
为你的 WordPress 网站增加顶部加载进度条效果

为你的 WordPress 网站增加顶部加载进度条效果

作者:大眼仔~旭 日期:2周前 (11-11) 评论:0 条

摘要:每次看到不同网站有不同效果的时候都想把它拿下来折腾到自己网站上,今天要给大家分享的是 WordPress 网页顶部加载进度条效果。可能有一些用户在访问某个网站的时候会看到网站底部或顶部有一个加载进度的效果,本篇文章就是要实现这种网页打开的进度条效果。 WordPress 实现网页加载进度条效果并不难,使用 HTML5、…

每次看到不同网站有不同效果的时候都想把它拿下来折腾到自己网站上,今天要给大家分享的是 WordPress 网页顶部加载进度条效果。可能有一些用户在访问某个网站的时候会看到网站底部或顶部有一个加载进度的效果,本篇文章就是要实现这种网页打开的进度条效果。

WordPress 实现网页加载进度条效果并不难,使用 HTML5、CSS3 以及JS 代码即可实现效果,以下是大眼仔旭给大家整理的具体修改方法。

第一步:修改 CSS 样式

将以下样式代码复制粘贴到自己网站主题的 style.css 样式表中保存

1
2
3
4
5
6
7
8
9
/*加载进度条*/
#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 }}
/*加载进度条*/

第二步:修改 PHP 文件加载样式表

将以下代码复制并保存到 footer.php 文件以开启加载样式

1
2
3
4
5
6
7
8
9
10
<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>

这里需要说明的是,进度条样式网络上也有很多,您可以根据自己的喜好来选择或者自己 DIY 进度条样式。

把以上代码整合到您的 WordPress 网站中就可以实现网页打开的时候顶部有加载进度条效果啦,如果刚加入刷新看不到效果估计有缓存或者按 Ctrl+F5 强制刷新。

声明:大眼仔旭 | 本文采用知识共享署名 4.0 国际许可协议[BY-NC-SA]进行授权
文章名称:《为你的 WordPress 网站增加顶部加载进度条效果
文章固定链接:http://www.dayanzai.me/wordpress-loading.html
本站资源仅供个人学习交流,请于下载后 24 小时内删除,不允许用于商业用途,否则法律问题自行承担。
转载声明
全部评论: (0条)
^_^ 暂无评论!

发表评论

返回顶部