　　曾經以為，loading的制作需要一些比較高深的web動畫技術，后來發現大多數loading都可以用“障眼法”做出來。比如一個旋轉的圓圈，并不都是將gif圖放進去，有些就是畫個靜止圖像，然后讓它旋轉就完了。gif圖也可以，但是加載時間比較長。

　　CSS的animation可以做出大多數的loading，比如：

loading1：

1、HTML：

1 <div id="ddr">
2     <div class="ddr ddr1"></div>
3     <div class="ddr ddr2"></div>
4     <div class="ddr ddr3"></div>
5     <div class="ddr ddr4"></div>
6     <div class="ddr ddr5"></div>
7 </div>

2、CSS：

 1 #ddr{
 2     margin: 0 auto;
 3     width: 70px;
 4     height: 120px;
 5 }
 6 .ddr{
 7     width: 10px;
 8     height: 120px;
 9     float: left;
10     margin: 2px;
11     background-color: #00ff00;
12     animation: loading 1s infinite ease-in-out;/*animation：動畫名稱 持續時間 動畫速度曲線 延遲 執行多少次 是否正反方向輪流播放*/
13 }
14 .ddr2{
15     animation-delay: -0.9s;/*定義開始執行的地方，負號表示直接從第900ms開始執行*/
16 }
17 .ddr3{
18     animation-delay: -0.8s;
19 }
20 .ddr4{
21     animation-delay: -0.7s;
22 }
23 .ddr5{
24     animation-delay: -0.6s;
25 }
26 @keyframes loading {
27     0%,40%,100%{ /*定義每幀的動作*/ 28         -webkit-transform: scaleY(0.5);
29     }
30     20%{
31         -webkit-transform: scaleY(1);
32     }
33 }

loading2：

1、HTML：

1 <div id="circle"></div>

2、CSS：

 1 #circle{
 2     margin: 20px auto;
 3     width: 100px;
 4     height: 100px;
 5     border: 5px white solid;
 6     border-left-color: #ff5500;
 7     border-right-color:#0c80fe;
 8     border-radius: 100%;
 9     animation: loading1 1s infinite linear;
10 }
11 @keyframes loading1{
12     from{transform: rotate(0deg)}to{transform: rotate(360deg)}
13 }

loading3：

1、HTML：

1 <div id="loader3">
2     <div id="loader3-inner"></div>
3 </div>

2、CSS：

 1 #loader3{
 2     box-sizing: border-box;
 3     position: relative;
 4     margin-left: 48%;
 5     transform: rotate(180deg);
 6     width: 50px;
 7     height: 50px;
 8     border: 10px groove rgb(170, 18, 201);
 9     border-radius: 50%;
10     animation: loader-3 1s ease-out alternate infinite;/* alternate表示則動畫會在奇數次數（1、3、5 等等）正常播放，而在偶數次數（2、4、6 等等）反向播放 */
11 }
12 #loader3-inner{
13     box-sizing: border-box;
14     width: 100%;
15     height: 100%;
16     border: 0 inset rgb(170, 18, 201);
17     border-radius: 50%;
18     animation: border-zoom 1s ease-out alternate infinite;
19 }
20 @keyframes loader-3 {
21     0%{
22         transform: rotate(0deg);
23     }
24     100%{
25         transform: rotate(-360deg);
26     }
27 }
28 @keyframes border-zoom {
29     0%{
30         border-width: 0px;
31     }
32     100%{
33         border-width: 10px;
34     }
35 }

loading4：

1、HTML：

1 <div id="loading4">
2     <div id="loader4" class="heart"></div>
3 </div>

2、CSS：

 1 #loading4{
 2     width: 100%;
 3     height: 100px;
 4 }
 5 #loader4{
 6     position: relative;
 7     margin-left: calc(50% - 25px);
 8     width: 50px;
 9     height: 50px;
10     animation: loader-4 1s ease-in-out alternate infinite;
11 }
12 .heart:before{
13     position: absolute;
14     left: 11px;
15     content: "";
16     width: 50px;
17     height: 80px;
18     transform: rotate(45deg);
19     background-color: rgb(230, 6, 6);
20     border-radius: 50px 50px 0 0;
21 }
22 .heart:after{
23     position: absolute;
24     right: 11px;
25     content: "";
26     width: 50px;
27     height: 80px;
28     background-color: rgb(230, 6, 6);
29     transform: rotate(-45deg);
30     border-radius: 50px 50px 0 0;
31 }
32 @keyframes loader-4 {
33     0%{
34         transform: scale(0.2);
35         opacity: 0.5;
36     }
37     100%{
38         transform: scale(1);
39         opacity: 1;
40     }
41 }

環形進度條：

0、原理：

?(1)、

如圖，先畫一個正方形，這個正方形就是環形loading的軌道（現在還不是），再將一個圓放在上面，充當遮蔽物。

(2)、

CSS3有個clip屬性，可以裁剪圖像，將上面的圓裁為一半，假如這個圓的右半部分一直看不見，旋轉左邊這個半圓，會出現怎樣的效果呢？

(3)、

如圖，就是這種效果，這時候再加一個遮罩，就形成了下面這種效果：

(4)、

再將最下面的正方形變成圓形（變成真正的軌道），旋轉橙色部分的圓環，底部青色的就會露出來，就形成了進度條的效果

(5)、

這是左邊的一半，將右邊的一半補齊：

(6)、

中間白色部分是mask，加上相應的文字，調整顏色就ok啦！

(7)、

1、HTML:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5   <meta charset="UTF-8">
 6   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8   <title>Document</title>
 9   <link rel="stylesheet" href="progress.css">
10 </head>
11 
12 <body>
13   <div class="circle">
14     <div class="preLeft">
15       <div class="left"></div>
16     </div>
17     <div class="preRight">
18       <div class="right"></div>
19     </div>
20   </div>
21   <div class="mask">
22     <span class="progress">0</span>%
23   </div>
24   <script src="progress.js"></script>
25 </body>
26 
27 </html>

2、CSS:

 1 *{
 2   margin: 0;
 3   padding: 0;
 4 }
 5 .circle {
 6   width: 200px;
 7   height: 200px;
 8   border-radius: 50%;
 9   box-shadow: 0 0 7px 0px inset;
10   background:linear-gradient(#9ED110, #50B517, #179067, #476EAF, #9f49ac, #CC42A2, #FF3BA7, #FF5800, #FF8100, #FEAC00, #FFCC00, #EDE604);
11   filter: blur(8px);
12   transform: scale(1.1);
13   -webkit-mask: radial-gradient(black 30px, #0000 90px);
14 }
15 .preLeft{
16   position: absolute;
17   top: 0;
18   left: 0;
19   width: 200px;
20   height: 200px;
21   clip: rect(0, 100px, auto, 0);
22 }
23 .left{
24   position: absolute;
25   top: 0;
26   left: 0;
27   width: 200px;
28   height: 200px;
29   border-radius: 50%;
30   box-shadow: 0 0 3px 0px inset;
31   background: #fff;
32   transform: rotate(0deg);
33   clip: rect(0, 100px, auto, 0);
34 }
35 .preRight{
36   position: absolute;
37   top: 0;
38   left: 0;
39   width: 200px;
40   height: 200px;
41   clip: rect(0, auto, auto, 100px);
42 }
43 .right {
44   position: absolute;
45   top: 0;
46   left: 0;
47   width: 200px;
48   height: 200px;
49   border-radius: 50%;
50   box-shadow: 0 0 3px 0px inset;
51   background:#fff;
52   transform: rotate(0deg);
53   clip: rect(0, auto, auto, 100px);
54 }
55 .mask {
56   width: 150px;
57   height: 150px;
58   position: absolute;
59   left: 25px;
60   top: 25px;
61   border-radius: 50%;
62   /* box-shadow: 0 0 5px 0px; */
63   background: #FFF; 
64   text-align: center;
65   line-height: 150px;
66 }

3、JS:

 1 function init() {
 2   let left = document.getElementsByClassName('left')[0];
 3   let right = document.getElementsByClassName('right')[0];
 4   let progress = document.getElementsByClassName('progress')[0];
 5   let value = 0;
 6   let timer = setInterval(() => {
 7     if (progress.innerHTML < 100) {
 8       progress.innerHTML = value  ;
 9       if (value <= 50) {
10         right.style.transform = 'rotate('   (value * 3.6)   'deg)';
11       } else if (value <= 100) {
12         left.style.transform = 'rotate('   ((value - 50) * 3.6)   'deg)';
13       }
14     } else {
15       clearInterval(timer);
16     }
17   }, 100);
18 }
19 window.onload = function () {
20   init();
21 };

逢年過節，百度或者谷歌都會在首頁播放一段動畫，比如元宵節：

這個動畫不僅僅是gif圖，有時候是一張長長的包含所有幀的圖片：

仿照animation一幀一楨的思路，可以將這張圖片做成動畫：

 1 #picHolder{
 2 /* 圖片樣式 */
 3     position: absolute;
 4     top: 17%;
 5     left: 50%;
 6     width: 270px;
 7     height: 129px;
 8     margin-left:-135px;
 9     background-image: url("../../../Library_image/tangyuan.png");
10     background-repeat: no-repeat;
11     background-position-x: 0;
12     cursor: pointer; 
13 }

 1 function animation () {
 2 /* 定時移動圖片，使觀眾看到不同的幀 */
 3   var po = 0
 4   var i = 0
 5   var holder = document.getElementById('picHolder')
 6   setInterval(function () {
 7     po  = -270
 8     i  
 9     holder.style.backgroundPositionX = po   'px'
10     if (i >= 31) {
11       i = 0
12       po = 270
13     }
14   }, 100)
15 }
16 window.onload = function () {
17   animation()
18 }