让你的WordPress网站更加动感：如何添加顶部加载进度条效果

本文链接：https://blog.csdn.net/winkexin/article/details/131801507

每次看到不同网站有不同效果的时候都想把它拿下来折腾到自己网站上，今天要给大家分享的是 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 强制刷新。