看到好多网站顶部有加载进度条然后折腾弄了一下,小提示一下:如果你觉得样式不好看样式可以自己修改哈,自己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.你游荡于互联网,也需要群体,加群一起互动交流,畅所欲言
扫描下方二维码即可加入交流讨论
