这几天，一位朋友询问了一些网站的排名。进入时，顶部会出现一个水平进度条，以动画的形式显示网站的加载进度。莱蒙看了一眼，开车送他。
这个进度条实际上非常简单，由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);
if(percentage == 100) {
$(“#progress”).addClass(“done”);
}
}
});</script>
保存完成后，进度条功能完全集成到您的网站中，而不使用插件，因为它都保存在主题中。
实时时间，上面设置的为3秒，根据自己需要设置时间，到这一步，出现文字主题页面顶部加载进度条实现，然后ctrl+f5缓存刷新、刷新，查看刷新页面，是否在加载进度条的顶部。
