曾經以為，loading的制作需要一些比較高深的web動畫技術，后來發現大多數loading都可以用“障眼法”做出來。比如一個旋轉的圓圈，并不都是將gif圖放進去，有些就是畫個靜止圖像，然后讓它旋轉就完了。gif圖也可以，但是加載時間比較長。
CSS的animation可以做出大多數的loading，比如：
loading1：
1、HTML：
| <div id="ddr"> <div class="ddr ddr1"></div> <div class="ddr ddr2"></div> <div class="ddr ddr3"></div> <div class="ddr ddr4"></div> <div class="ddr ddr5"></div></div> |
2、CSS：
| #ddr{ margin: 0 auto; width: 70px; height: 120px;}.ddr{ width: 10px; height: 120px; float: left; margin: 2px; background-color: #00ff00; animation: loading 1s infinite ease-in-out;/*animation：動畫名稱 持續時間 動畫速度曲線 延遲 執行多少次 是否正反方向輪流播放*/}.ddr2{ animation-delay: -0.9s;/*定義開始執行的地方，負號表示直接從第900ms開始執行*/}.ddr3{ animation-delay: -0.8s;}.ddr4{ animation-delay: -0.7s;}.ddr5{ animation-delay: -0.6s;}@keyframes loading { 0%,40%,100%{ /*定義每幀的動作*/ -webkit-transform: scaleY(0.5); } 20%{ -webkit-transform: scaleY(1); }} |
loading2：
1、HTML：
| <div id="circle"></div> |
2、CSS：
| #circle{ margin: 20px auto; width: 100px; height: 100px; border: 5px white solid; border-left-color: #ff5500; border-right-color:#0c80fe; border-radius: 100%; animation: loading1 1s infinite linear;}@keyframes loading1{ from{transform: rotate(0deg)}to{transform: rotate(360deg)}} |
loading3：
1、HTML：
| <div id="loader"> <div id="loader-inner"></div> </div> |
2、CSS：
| #loader3{ box-sizing: border-box; position: relative; margin-left: 48%; transform: rotate(180deg); width: 50px; height: 50px; border: 10px groove rgb(170, 18, 201); border-radius: 50%; animation: loader-3 1s ease-out alternate infinite;/* alternate表示則動畫會在奇數次數（1、3、5 等等）正常播放，而在偶數次數（2、4、6 等等）反向播放 */}#loader3-inner{ box-sizing: border-box; width: 100%; height: 100%; border: 0 inset rgb(170, 18, 201); border-radius: 50%; animation: border-zoom 1s ease-out alternate infinite;}@keyframes loader-3 { 0%{ transform: rotate(0deg); } 100%{ transform: rotate(-360deg); }}@keyframes border-zoom { 0%{ border-width: 0px; } 100%{ border-width: 10px; }} |
