CSS3實現loading圖
HTML5學堂：學習CSS3，重要的並不是那幾個命令，而是如何應用CSS3的知識實現網站中的效果，換句話說，“只有想不到，沒有做不到”。在這個效果當中，主要用到了圓角邊框和動畫。
HTML5學堂-劉國利在此鄭重宣告：本篇文章的靈感來源於2014年的自己一個學生的技術演講，他運用CSS3實現了loading圖效果，在此書寫出來與大家分享。效果創造的原作者——黃仕輝
實現的基本思路：利用圓角邊框對loading圖的樣式控制，讓其從方形變化為圓形；之後控制不同的邊框粗細，調整更佳的視覺效果；最後利用CSS3中的動畫，實現運動；在進行佈局的時候，要考慮移動端水平垂直居中的要求以及不同解析度狀態下的效果。
基本效果圖
基本html結構搭建
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>HTML5學堂 - CSS3 - loading圖</title> <link rel="stylesheet" href="../common/reset.css"> <style> body,html { height: 100%; } .wrap{ position: absolute; top: 0%; right: 0%; bottom: 0%; left: 0%; width: 0px; height: 0px; padding: 15%; margin: auto; border: 1px solid #06f; border-left-width: 4px; border-bottom-width: 3px; border-right-width: 2px; border-radius: 50%; } </style> </head> <body> <div class="wrap"></div> </body> </html>
此處採用了一種很特殊的居中方法，將盒模型進行定位處理之後，上下左右均採用了0%的值，然後運用margin:auto的控制，讓上下左右自動處理外邊距值，從而達到居中的狀態。關於元素的水平垂直居中，可點選檢視：《網易NEC水平垂直居中》
另一個處理，是寬度高度自適應的設定，在為width和height設定百分比之後，會分別根據父級元素的寬度和高度進行計算，此時一旦裝置寬度高度不同，我們的loading圖就不再是正圓形，由於padding設定百分比值時，均是按照文字方向計算的（預設都是參照父級的寬度計算），因此此處我們將寬高均設為0，而用padding進行內容區大小的設定。
關於邊框的設定已經提到了，四個方向採用不同的邊框粗細。
順便一提，由於使用的是CSS3進行控制，因此，即便是在PC端調整視窗大小，loading圖的大小也會隨之發生變化。
顯示效果
PS：從自己部落格(獨行冰海)取的圖片，所以自然底部就有水印了~~~
CSS3動畫設定
之後進行CSS3動畫的設定即可，在CSS中程式碼中增加如下內容：
.wrap{
-webkit-animation: loading 2s linear infinite;
}
@-webkit-keyframes loading {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}當前就已經實現出來了，不過，在測試的時候會發現，出現了滾動條，因此，我們可以給body再增加這樣一句程式碼：
body {
overflow: hidden;
}CSS3就已經搞定了~很簡單的解決了loading的效果，很適合在移動端應用。