让wordpress网站上方出现一个加载进度条

看到好多网站顶部有加载进度条然后折腾弄了一下,小提示一下:如果你觉得样式不好看样式可以自己修改哈,自己DIY哈

教程步骤分为二部分

1,插件下载使用

2,修改代码实现

插件下载

[url href=https://pan.baidu.com/s/1qYPd3Ko]网盘下载[/url]

代码实现

将下面CSS代码放到你主题的样式表里面去

  1. #progress {position:fixed;height: 2px;background:#9C0;transition:opacity 500ms linear; z-index:1000000; top:0;}  
  2. #progress.done {opacity:0 }  
  3. #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; }  
  4. @-webkit-keyframes pulse {  
  5. 30% { opacity:.6}  
  6. 60% {opacity:0;}  
  7. 100% { opacity:.6 }}  

将下面JS调用代码放到footer底部文件去

  1. <div id=“progress”><span></span></div><script language=“javascript”>    $({property: 0}).animate({property: 100}, {  
  2. duration: 3000,  
  3. step: function() {  
  4. var percentage = Math.round(this.property);  
  5. $(“#progress”).css(“width”,  percentage+“%”);  
  6. if(percentage == 100) {  
  7. $(“#progress”).addClass(“done”);  
  8. }  
  9. }  
  10. });</script>  

给TA买糖
共{{data.count}}人
人已赞赏
wordpress教程

自动将WordPress内容Email邮箱地址加密防止被收集

2018-3-12 11:10:41

wordpress教程

知更鸟begin主题概况代码美化

2018-3-15 14:36:13

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索