wordpress主题页面实现顶部加载进度条详细教程

页面加载的进度条效果相信大家都仰慕已久！下面是由疯狂的大叔编写的wordpress主题页面实现顶部加载进度条的详细教程，简简单单，就可实现酷炫的页面加载进度条效果！

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

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.             @-webkit-keyframes pulse {
24.                 30% {
25.                     opacity:.6
26.                 }
27.                 60% {
28.                     opacity:0;
29.                 }
30.                 100% {
31.                     opacity:.6
32.                 }
33. }

对的，仅针对针对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.                     $('#progress').css('width',  percentage+"%");
6.                      if(percentage == 100) {
7.                             $("#progress").addClass("done");//完成，隐藏进度条
8.                         }
9.                 }
10. });

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

转载于:https://my.oschina.net/fxiaotian/blog/1305692