这几天，一位朋友询问了一些网站的排名。进入时，顶部会出现一个水平进度条，以动画的形式显示网站的加载进度。莱蒙看了一眼，开车送他。
这个进度条实际上非常简单，由 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 主题页面顶部加载进度条的实现
免责声明
1 网站名称：汇站网
2 永久网址：https://www.huizhanii.com
3 本站资源来源于网友投稿和付费购买，仅供编程人员及源代码爱好者下载参考与研究，不提供任何技术支持服务！
4 资源展示图片及相关信息仅供参考，不代表本站立场！本站仅作为信息存储平台
5 禁止在服务器和虚拟机上搭建运营，所有资源仅限本地调试与研究使用，不支持联网运行！
6 未经版权方授权，严禁用于商业用途。使用者如违反国家法律法规，需自行承担全部法律责任！
7 请在下载后24小时内删除！建议支持正版授权作品
8 如资源侵犯您的合法权益，请提供版权证明及相关作品信息发送至邮箱：972908224@qq.com我们将及时处理
9 如遇下载链接失效或支付未到账，请联系站长处理
10 欢迎投稿优质源码或教程，审核通过后将获得相应奖励
11 资源收费仅用于维持网站正常运营
12 数字商品具有特殊性质，一经购买概不退款
13 查看更多详情
常见问题
相关文章
猜你喜欢
- 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
