css實現加載中的效果

那天閑着，學習了一下樣式效果，自己實現了一個簡單的加載中的效果 廢話不多說，開始吧！！

一、實現一個圓環

   
   要實現圓環，首先我們需要知道盒模型里面border的本質，先來看一個效果吧

  

 

 從上面，我們應該可以看到元素盒模型中 border 的本質：元素每個方向上的 border 是梯形而並非矩形。知道了這個，想實現弧狀的樣式就不是問題了

我們只需要想辦法讓中間紅色區域變成弧狀就可以啦，我們設置div的border-radius為50%，就變成這樣啦，看下圖

是不是一個圓形就出現啦，現在我們讓中間的區域為白色就會出現圓弧了，其實默認背景色就是白色，我們也可以不設置背景色，這邊為了說明原理，我們還是自己設置

一般加載中的圓環都不是整個的，這里我們畫出一個半閉合的圓環

看懂了嗎？只需要設置border-top的顏色為白色就可以了，這樣我們就解決了第一個問題了，下來就是讓圓環動起來了。

二、轉動的圓環

 這里就要用到css里面的動畫了，我們定義一個動畫，因為這里只是演示，所以簡單的實現以下動畫，並且也沒有兼容各大瀏覽器，自己可以根據情況寫全。

 @keyframes loading{
   0%{
     transform: rotate(0deg);
     }
    100%{
     transform: rotate(360deg);
     }
 }

下來我們將動畫效果加入到樣式中，就實現效果了，demo如下 

  http://files.cnblogs.com/files/nini-huai/demo.gif