實現一個loading效果，需要分平台來考慮。
1.在PC端，因為IE9及其以下的版本實現不了CSS3動畫效果，所以用CSS3是實現不了的，在這里比較建議使用gif的動態圖片來實現，能兼容各主流瀏覽器。
在這里介紹一個很好用的在線loading生成工具，方便、快捷！http://preloaders.net/en/circular
2.在移動端，不考慮winphone上低版本的瀏覽器時（winphone低版本瀏覽器是指采用IE9及其以下的內核），用css3實現其效果是比較好的選擇。
下面介紹移動端的CSS3實現類菊花loading效果：
實現的思路是：畫出12個點，類似於時鍾12個點
用旋轉和變換，給12個點進行定位：即每個點旋轉相差30度角，定義縱向移動距離相同，統一為34px
設置每個點的延遲時間，使達到每個點執行的時間不同。這里設置了12個點的總共執行時間是2S，所以每個點的延遲執行時間相差1/6S
每個點的變化效果是opacity、width、height都逐漸變化
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="Cache-Control" content="no-cache" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" /> <meta name="MobileOptimized" content="320"/> <title>loading</title> <style> @-webkit-keyframes loading { from {opacity: 1;width:1px;height:1px;} to {opacity: 0.25;width:8px;height:8px;} } div.spinner { position: absolute; top:50%; left:50%; display: inline-block; } div.spinner div { width:8px; height:8px; background: #a4a2a4; border:1px solid #fff; position: absolute; left: 100%; top: 100%; opacity: 0; -webkit-animation: loading 2s linear infinite; -webkit-border-radius: 30px; } div.spinner div.bar1 {-webkit-transform:rotate(0deg) translate(0, -34px); -webkit-animation-delay: -0s;} div.spinner div.bar2 {-webkit-transform:rotate(30deg) translate(0, -34px); -webkit-animation-delay: -1.8334s;} div.spinner div.bar3 {-webkit-transform:rotate(60deg) translate(0, -34px); -webkit-animation-delay: -1.6668s;} div.spinner div.bar4 {-webkit-transform:rotate(90deg) translate(0, -34px); -webkit-animation-delay: -1.5002s;} div.spinner div.bar5 {-webkit-transform:rotate(120deg) translate(0, -34px); -webkit-animation-delay: -1.3336s;} div.spinner div.bar6 {-webkit-transform:rotate(150deg) translate(0, -34px); -webkit-animation-delay: -1.167s;} div.spinner div.bar7 {-webkit-transform:rotate(180deg) translate(0, -34px); -webkit-animation-delay: -1.0004s;} div.spinner div.bar8 {-webkit-transform:rotate(210deg) translate(0, -34px); -webkit-animation-delay: -0.8338s;} div.spinner div.bar9 {-webkit-transform:rotate(240deg) translate(0, -34px); -webkit-animation-delay: -0.6672s;} div.spinner div.bar10 {-webkit-transform:rotate(270deg) translate(0, -34px); -webkit-animation-delay: -0.5006s;} div.spinner div.bar11 {-webkit-transform:rotate(300deg) translate(0, -34px); -webkit-animation-delay: -0.334s;} div.spinner div.bar12 {-webkit-transform:rotate(330deg) translate(0, -34px); -webkit-animation-delay: -0.1674s;} </style> </head> <body style="margin:auto;width:300px;"> <div class="spinner"> <div class="bar1"> </div> <div class="bar2"> </div> <div class="bar3"> </div> <div class="bar4"> </div> <div class="bar5"> </div> <div class="bar6"> </div> <div class="bar7"> </div> <div class="bar8"> </div> <div class="bar9"> </div> <div class="bar10"> </div> <div class="bar11"> </div> <div class="bar12"> </div> </div>
</body>
</html>
只要把上面每個點的width、height、border-radius還有@-webkit-keyframes loading里面改動一下，就能夠實現如下其他效果：
源代碼下載：點擊這里