为WordPress网站添加上方加载进度条，提升用户体验

每当我看到不同网站上有各种独特的效果时，都会想将其应用到自己的网站上进行调试。今天我要与大家分享的是如何在WordPress网页顶部添加加载进度条效果。有些用户在访问某些网站时可能会看到网页底部或顶部出现加载进度条的效果。本文旨在实现这种网页打开时的进度条效果。

在WordPress中实现网页加载进度条效果并不难，只需使用HTML5、CSS3和JS代码即可。以下是具体的修改方法。

第一步：修改 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 }}
/*加载进度条*/

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

将以下代码复制并保存到 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>

需要说明的是，网络上存在多种进度条样式，您可以根据个人喜好选择适合自己网站的样式，甚至自行设计进度条样式。

将以上代码整合到您的WordPress网站中，即可在网页打开时看到顶部加载进度条的效果。如果刚添加后未能看到效果，可能是由于缓存，您可以尝试按Ctrl+F5强制刷新页面。