
摘要:每次看到不同网站有不同效果的时候都想把它拿下来折腾到自己网站上,今天要给大家分享的是 WordPress 网页顶部加载进度条效果。可能有一些用户在访问某个网站的时候会看到网站底部或顶部有一个加载进度的效果,本篇文章就是要实现这种网页打开的进度条效果。 WordPress 实现网页加载进度条效果并不难,使用 HTML5、…
每次看到不同网站有不同效果的时候都想把它拿下来折腾到自己网站上,今天要给大家分享的是 WordPress 网页顶部加载进度条效果。可能有一些用户在访问某个网站的时候会看到网站底部或顶部有一个加载进度的效果,本篇文章就是要实现这种网页打开的进度条效果。
WordPress 实现网页加载进度条效果并不难,使用 HTML5、CSS3 以及JS 代码即可实现效果,以下是大眼仔旭给大家整理的具体修改方法。
第一步:修改 CSS 样式
将以下样式代码复制粘贴到自己网站主题的 style.css 样式表中保存
1
2
3
4
5
6
7
8
9 /*加载进度条*/
#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 }}
/*加载进度条*/
第二步:修改 PHP 文件加载样式表
将以下代码复制并保存到 footer.php 文件以开启加载样式
1
2
3
4
5
6
7
8
9
10 <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>
这里需要说明的是,进度条样式网络上也有很多,您可以根据自己的喜好来选择或者自己 DIY 进度条样式。
把以上代码整合到您的 WordPress 网站中就可以实现网页打开的时候顶部有加载进度条效果啦,如果刚加入刷新看不到效果估计有缓存或者按 Ctrl+F5 强制刷新。
声明:大眼仔旭 | 本文采用署名-非商业性使用-相同方式共享 4.0 国际许可协议[CC BY-NC-SA]进行授权
文章名称:《为你的 WordPress 网站增加顶部加载进度条效果》
文章固定链接:http://www.dayanzai.me/wordpress-loading.html
本站资源仅供个人学习交流,请于下载后 24 小时内删除,不允许用于商业用途,否则法律问题自行承担。
文章名称:《为你的 WordPress 网站增加顶部加载进度条效果》
文章固定链接:http://www.dayanzai.me/wordpress-loading.html
本站资源仅供个人学习交流,请于下载后 24 小时内删除,不允许用于商业用途,否则法律问题自行承担。
转载声明
猜你喜欢
- 2022-04-01如何在 Windows 上安装 Internet 信息服务 (IIS)
- 2021-12-08为什么 .com 是世界上最受欢迎的顶级域名
- 2021-04-14文件安全擦除工具 WipeFile 3.6 中文免费版
- 2015-06-28PS 磨皮滤镜插件 Imagenomic Portraiture 2.3.4 Build 2342 中文汉化版
- 2015-07-03iCare 数据恢复工具 iCare Data Recovery Pro 6.2 中文汉化免费版
相关推荐
全部评论: (0条)
^_^ 暂无评论!
发表评论
最新标签
Autodesk
GitHub
Inno Setup 技巧
Inno Setup 教程
JetBrains
Microsoft
Office
PDF 编辑器
PDF 阅读器
Win10 技巧
Windows 10
Windows 10 技巧
Windows 11 小技巧
Wise Soft
代码编辑器
免费商用字体
免费字体
免费软件
办公软件
固态硬盘检测工具
图像处理工具
图像浏览器
安卓软件
安装包制作工具
屏幕录像
屏幕录像工具
屏幕录像软件
开源字体
开源软件
思维导图
截图工具
数据恢复工具
文本编辑器
格式转换工具
桌面录像
系统优化工具
系统增强
系统增强工具
编程开发
视频播放器
视频转换器
视频转换工具
解压缩工具
音乐播放器
音频转换工具