
摘要:每次看到不同网站有不同效果的时候都想把它拿下来折腾到自己网站上,今天要给大家分享的是 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 国际许可协议[BY-NC-SA]进行授权
文章名称:《为你的 WordPress 网站增加顶部加载进度条效果》
文章固定链接:http://www.dayanzai.me/wordpress-loading.html
本站资源仅供个人学习交流,请于下载后 24 小时内删除,不允许用于商业用途,否则法律问题自行承担。
文章名称:《为你的 WordPress 网站增加顶部加载进度条效果》
文章固定链接:http://www.dayanzai.me/wordpress-loading.html
本站资源仅供个人学习交流,请于下载后 24 小时内删除,不允许用于商业用途,否则法律问题自行承担。
转载声明
猜你喜欢
- 2019-12-28Youtube 视频下载器 YouTube Video Downloader Pro 5.20.1 中文汉化版
- 2021-03-03免费视频播放器 ALLPlayer 8.8.5 中文多语免费版
- 2020-05-21Windows 照片拼贴制作工具 FigrCollage Pro 3.0.1.0 中文汉化版
- 2019-11-10使用 CMD 命令如何给 Java jar 包文件执行数字签名操作
- 2014-11-19Windows 7 ISO 镜像 MSDN 原版简体中文全系列下载
相关推荐
- 2020-05-14PDF 批量转换工具 TriSun PDF to X 12.0 Build 063 中文多语免费版
- 2019-11-30暴风影音回归初心 暴风影音16 v9.04 终结版
- 2021-04-20免费开源跨平台音频软件 Audacity 3.0.2 中文多语免费版
- 2021-04-02免费开源的 Office 办公套件 LibreOffice 7.1.2.2 + x64 中文免费版
- 2020-10-24Windows 开始菜单增强工具 ClassicShell 4.4.160 中文多语免费版
全部评论: (0条)
^_^ 暂无评论!
发表评论
最新标签
Ashampoo
Autodesk
CyberLink
GitHub
Inno Setup 技巧
Inno Setup 教程
JetBrains
Microsoft
Office
PDF 编辑器
Win10 技巧
Windows 10
Windows 10 技巧
Wise Soft
下载工具
代码编辑器
免费商用字体
免费字体
免费软件
办公软件
卸载工具
图像处理工具
图像浏览器
安卓软件
屏幕录像
屏幕录像工具
屏幕录像软件
开源软件
思维导图
截图工具
数据恢复
数据恢复工具
文本编辑器
格式转换工具
桌面录像
系统优化工具
系统增强
系统增强工具
编程开发
视频下载工具
视频播放器
视频转换器
视频转换工具
音乐播放器
音频转换工具