摘要:每次看到不同网站有不同效果的时候都想把它拿下来折腾到自己网站上,今天要给大家分享的是 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 网站增加顶部加载进度条效果》
文章固定链接:https://www.dayanzai.me/wordpress-loading.html
本站资源仅供个人学习交流,请于下载后 24 小时内删除,不允许用于商业用途,否则法律问题自行承担。
文章名称:《为你的 WordPress 网站增加顶部加载进度条效果》
文章固定链接:https://www.dayanzai.me/wordpress-loading.html
本站资源仅供个人学习交流,请于下载后 24 小时内删除,不允许用于商业用途,否则法律问题自行承担。
转载声明
猜你喜欢
- 2024-09-07开源渗透测试平台 Kali Linux 2024.3 + x64 官方原版镜像发布
- 2024-02-29Windows 11 24H2 将阻止缺少 SSE4.2 指令集的处理器
- 2024-04-25OpenEmu:适用于 MacOS 系统的开源游戏模拟器
- 2022-11-29Windows 环境变量 – 所有 Windows 版本的终极指南
- 2022-06-05您今天应该学习的 5 种手机游戏开发语言
相关推荐
- 2022-11-13开源免费电脑屏幕投屏工具 Deskreen 2.0.4 中文免费版
- 2024-11-21医学 ROC 曲线统计软件 MedCalc 23.0.9 + x64 中文多语免费版
- 2020-07-03豪华版任务管理器 MiTeC Task Manager DeLuxe 3.5.1.0 + x64 绿色汉化版
- 2015-02-19光标编辑器 Sib Cursor Editor 3.13 中文汉化版
- 2023-08-14什么是 AI 人工智能聊天机器人以及它们为何受欢迎?
全部评论: (0条)
^_^ 暂无评论!
发表评论
最新标签
Adobe
Autodesk
ChatGPT
FTP 软件
GitHub
Inno Setup 技巧
Inno Setup 教程
JetBrains
Microsoft
Office
OpenAI
PDF 工具
PDF 编辑器
PDF 转换器
PDF 阅读器
Win10 技巧
Windows 10
Windows 10 技巧
Windows 11
Windows 11 小技巧
Windows 11 技巧
Wise Soft
代码编辑器
免费商用字体
免费字体
免费字体下载
免费软件
办公软件
卸载工具
固态硬盘检测工具
图像处理工具
图像查看器
图像浏览器
安卓视频编辑器
安卓软件
安装包制作工具
屏幕录像
屏幕录像工具
屏幕录像软件
开源字体
开源软件
思维导图
截图工具
数据恢复
数据恢复工具
文本编辑器
格式转换工具
桌面录像
汉化工具
系统优化工具
系统增强
系统增强工具
编程开发
视频播放器
视频编辑器
视频转换器
视频转换工具
解压缩工具
音乐播放器
音频转换工具