wordpress主题页面顶部实现加载进度条

2021-12-22 2,185
下载不了?请联系网站客服提交链接错误!
增值服务:

wordpress主题页面顶部实现加载进度条

wordpress html5加载进度条插件

这几天有朋友问有一些网站的顶部在进入时顶部会出现一个横向的进度条,可以以动画的形式显示网站加载的进度,柠檬看了一眼,盘他。

这个进度条实际上是非常简单的,就是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秒,根据自己的需求设定时间吧,到了这步,wordpress主题页面顶部加载进度条的实现就出现了,做为想学习者,我想你应该知道ctrl+f5是去缓存刷新,刷新后,看看刷新网页,顶部是不是出现了加载进度条了。。恩,就是这样!

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)
如需 WordPress 优化加速、二次开发、网站维护、企业网站建设托管等服务,可联系我购买付费服务:点此联系我 | 近期站内热门福利推荐:

:本文采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可, 转载请附上原文出处链接。
1、本站提供的源码不保证资源的完整性以及安全性,不附带任何技术服务!
2、本站提供的模板、软件工具等其他资源,均不包含技术服务,请大家谅解!
3、本站提供的资源仅供下载者参考学习,请勿用于任何商业用途,请24小时内删除!
4、如需商用,请购买正版,由于未及时购买正版发生的侵权行为,与本站无关。
5、本站部分资源存放于百度网盘或其他网盘中,请提前注册好百度网盘账号,下载安装百度网盘客户端或其他网盘客户端进行下载;
6、本站部分资源文件是经压缩后的,请下载后安装解压软件,推荐使用WinRAR和7-Zip解压软件。
7、如果本站提供的资源侵犯到了您的权益,请邮件联系: 1798582342@qq.com 进行处理!

文章版权及转载声明

作者:有趣本文地址:https://www.zyhao.net/14066.html最后更新时间为 2021年12月22日 星期三 20:51:26
文章转载或复制请以超链接形式并注明来源出处 有趣源码
声明:某些文章或资源具有时效性,若有 错误 或 所需下载资源 已失效,请联系客服QQ:11210980

有趣源码,优质资源分享网

常见问题
  • 本站所有资源版权均属于原作者所有,均只能用于参考学习,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,建议提前注册好百度网盘账号,使用百度网盘客户端下载
查看详情

相关文章