　　曾经以为，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 }