看到好多网站顶部有加载进度条然后折腾弄了一下，小提示一下：如果你觉得样式不好看样式可以自己修改哈，自己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>
