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 是去緩存刷新，刷新後，看看刷新網頁，頂部是不是出現了加載進度條了。。恩，就是這樣！