看到好多网站顶部有加载进度条然后折腾弄了一下，小提示一下：如果你觉得样式不好看样式可以自己修改哈，自己DIY哈
教程步骤分为二部分
1，插件下载使用
2，修改代码实现
插件下载
[url href=https://pan.baidu.com/s/1qYPd3Ko]网盘下载[/url]
代码实现
将下面CSS代码放到你主题的样式表里面去
- #progress {position:fixed;height: 2px;background:#9C0;transition:opacity 500ms linear; z-index:1000000; top:0;}
- #progress.done {opacity:0 }
- #progress span { position:absolute; height:2px;-webkit-box-shadow:#2085c5 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 }}
将下面JS调用代码放到footer底部文件去
- <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>
加群入久伴博客官方微信群
加入久伴官方微信群有啥优势？
1.文章内部资源由于时间久远可能失效，加群,群内可以第一时间反馈
2.网站中教程不一定适用任何人，加群可以第一时间咨询并解决您得疑惑
3.你游荡于互联网，也需要群体，加群一起互动交流，畅所欲言
扫描下方二维码即可加入交流讨论
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
