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.             }
  9. #progress.done {
  10.                 opacity:0
  11.             #progress span {
  12. position:absolute;
  13.                 height:2px;
  14. #2085c5 1px 0 6px 1px;
  15.                 -webkit-border-radius:100%;
  16.                 width:150px;
  17. rightright:-10px;
  18.                 -webkit-animation:pulse 2s ease-out 0s infinite;
  20.                 30% {
  21.                 }
  22.                     opacity:0;
  23.                 100% {
  24.                 }
    1. <div id="progress">
    2. </div>

jquery 代码

  1. $({property: 0}).animate({property: 100}, {
  2.                 step: function() {
  3. var percentage = Math.round(this.property);

  5. "%");

  7. if(percentage == 100) {
  8.                             $("#progress").addClass("done");
  9.                 }
  10. });

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