这几天，一位朋友询问了一些网站的排名。进入时，顶部会出现一个水平进度条，以动画的形式显示网站的加载进度。莱蒙看了一眼，开车送他。
这个进度条实际上非常简单，由 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 秒，根据自己需要设置时间，到这一步，出现文字主题页面顶部加载进度条实现，然后 ctrl+f5 缓存刷新、刷新，查看刷新页面，是否在加载进度条的顶部。
汇站网 wordpress美化 在WordPress主题页面顶部加载进度条的实现 https://www.huizhanii.com/15397.html
常见问题
相关文章
猜你喜欢
- WordPress教程 在文章的侧边栏添加一项滚动公告功能 2024-11-26
- WordPress主题美化升级 – 在侧边栏添加古诗一言小工具 2024-11-26
- WordPress美化 子比主题zibll美化最新new发布文章列表角标 2024-11-17
- WordPress美化 给网站右侧栏添加天气预报-自定义HTML代码设置 2024-10-23
- wordpress美化 纯代码给网站添加一个版权声明教程 2024-10-23
- WordPress文章美化 为博客内容页添加展开收缩功能 2024-10-18
- wordpress美化 子比主题大banner首页添加滚动图片+卡片自适应（附带代码教程） 2024-10-16
- wordpress美化 纯代码实现网站侧边栏添加广告按钮 2024-10-10
- 炫丽版给网站添加一个漂亮的Loading加载动画 2024-08-01
- 使用一行代码让您的网站菜单图标实现旋转效果 2024-07-08
