之前我用过Pace来显示WordPress页面的加载进度和加载动画，但觉得很鸡肋，所以就放弃了。最近我在知乎看到有人整理了几个漂亮的加载动画，就又想添加起来试试。（仍然很鸡肋）

原贴地址：https://zhuanlan.zhihu.com/p/24464355

我用的是里面的第一个：CSS loader

效果如下：

要添加的话其实也很简单。

1 添加或引入css

将下列代码添加到head.php，或者新建成css文件再引入到head。

  1. <style>    
  2. body {    
  3.   margin: 0;    
  4. }    
  5. .loader {    
  6.   position: absolute;    
  7.   top: 50%;    
  8.   left: 40%;    
  9.   margin-left: 10%;    
  10.   transform: translate3d(-50%, -50%, 0);    
  11. }    
  12. .dot {    
  13.   width: 24px;    
  14.   height: 24px;    
  15.   background: #3ac;    
  16.   border-radius: 100%;    
  17.   display: inline-block;    
  18.   animation: slide 1s infinite;    
  19. }    
  20. .dot:nth-child(1) {    
  21.   animation-delay: 0.1s;    
  22.   background: #32aacc;    
  23. }    
  24. .dot:nth-child(2) {    
  25.   animation-delay: 0.2s;    
  26.   background: #64aacc;    
  27. }    
  28. .dot:nth-child(3) {    
  29.   animation-delay: 0.3s;    
  30.   background: #96aacc;    
  31. }    
  32. .dot:nth-child(4) {    
  33.   animation-delay: 0.4s;    
  34.   background: #c8aacc;    
  35. }    
  36. .dot:nth-child(5) {    
  37.   animation-delay: 0.5s;    
  38.   background: #faaacc;    
  39. }    
  40. @-moz-keyframes slide {    
  41.   0% {    
  42.     transform: scale(1);    
  43.   }    
  44.   50% {    
  45.     opacity: 0.3;    
  46.     transform: scale(2);    
  47.   }    
  48.   100% {    
  49.     transform: scale(1);    
  50.   }    
  51. }    
  52. @-webkit-keyframes slide {    
  53.   0% {    
  54.     transform: scale(1);    
  55.   }    
  56.   50% {    
  57.     opacity: 0.3;    
  58.     transform: scale(2);    
  59.   }    
  60.   100% {    
  61.     transform: scale(1);    
  62.   }    
  63. }    
  64. @-o-keyframes slide {    
  65.   0% {    
  66.     transform: scale(1);    
  67.   }    
  68.   50% {    
  69.     opacity: 0.3;    
  70.     transform: scale(2);    
  71.   }    
  72.   100% {    
  73.     transform: scale(1);    
  74.   }    
  75. }    
  76. @keyframes slide {    
  77.   0% {    
  78.     transform: scale(1);    
  79.   }    
  80.   50% {    
  81.     opacity: 0.3;    
  82.     transform: scale(2);    
  83.   }    
  84.   100% {    
  85.     transform: scale(1);    
  86.   }    
  87. }    
  88. </style>    

2 添加html标签

将下列代码添加到head.php

  1. <div id="pre-loader" class="loader">  
  2.   <div class="dot"></div>  
  3.   <div class="dot"></div>  
  4.   <div class="dot"></div>  
  5.   <div class="dot"></div>  
  6.   <div class="dot"></div>  
  7. </div>  

3 判断网页加载完成，移除动画

将下列代码添加到head.php

  1. <script type="text/javascript">           
  2.         document.onreadystatechange = function () {  
  3.             if(document.readyState=="complete") {  
  4.                 $("#pre-loader").fadeOut("slow");  
  5.                 document.getElementById("pre-loader").remove();  
  6.             }  
  7.         }  
  8. </script>