wordpress主题页面顶部加载进度条的实现

wordpress主题页面顶部加载进度条的实现，大叔第一时间能想到的就是css3了，但是可能对IE低版本的浏览器兼容性不好了，但是玩wordpress的，都无视IE了哈，那么，下面我就直接说教程吧，简单粗暴，css3+JQ了辣。

CSS3   

1. body{

2.                 margin:0;

3.             }

4.             #progress {

5.                 position:fixed;

6.                 height: 2px;

7.                 background:#2085c5;

8.                 transition:opacity 500ms linear

9.             }

10.             #progress.done {

11.                 opacity:0

12.             }

13.             #progress span {

14.                 position:absolute;

15.                 height:2px;

16.                 -webkit-box-shadow:#2085c5 1px 0 6px 1px;

17.                 -webkit-border-radius:100%;

18.                 opacity:1;

19.                 width:150px;

20.                 rightright:-10px;

21.                 -webkit-animation:pulse 2s ease-out 0s infinite;

22.             }

23. 
    

24.             @-webkit-keyframes pulse {

25.                 30% {

26.                     opacity:.6

27.                 }

28.                 60% {

29.                     opacity:0;

30.                 }

31.                 100% {

32.                     opacity:.6

33.                 }

34. }

对的，仅针对针对webkit内核浏览器写的，处女座的你，可以适当的多写一些前缀。

HTML代码

1. <div id="progress">

2.             <span></span>

3. </div>

jquery代码

1. $({property: 0}).animate({property: 100}, {

2.                 duration: 3000,

3.                 step: function() {

4.                     var percentage = Math.round(this.property);

5. 
   

6.                     $('#progress').css('width',  percentage+"%");

7. 
   

8.                      if(percentage == 100) {

9.                             $("#progress").addClass("done");//完成，隐藏进度条

10.                         }

11.                 }

12. });

活学活用吧，上面设置的时间是3秒，根据自己的需求设定时间吧，到了这步，wordpress主题页面顶部加载进度条的实现就出现了，做为想学习者，我想你应该知道ctrl+f5是去缓存刷新，刷新后，看看刷新网页，顶部是不是出现了加载进度条了。。恩，就是这样！