#精品
在WordPress主题页面顶部加载进度条的实现

2021-08-26 0 895

这几天，一位朋友询问了一些网站的排名。进入时，顶部会出现一个水平进度条，以动画的形式显示网站的加载进度。莱蒙看了一眼，开车送他。
这个进度条实际上非常简单，由 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.  若资源侵犯了您的合法权益，请持您的版权证书和相关原作品信息来信通知我们请来信     我们会及时删除，给您带来的不便，我们深表歉意！
9.  如下载链接失效、广告或者压缩包问题请联系站长处理！
10.  如果你也有好源码或者教程，可以发布到网站，分享有金币奖励和额外收入！
11.  本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
12.  因源码具有可复制性，一经赞助，不得以任何形式退款。
13.  更多详情请点击查看

汇站网 wordpress美化在WordPress主题页面顶部加载进度条的实现 https://www.huizhanii.com/15397.html