寫在前面

之前碰到一個小練習，就是用純CSS3來寫餅狀的loading效果，之前著實沒有寫過這玩意兒，小花完全沒頭緒，然后參考了張鑫旭老師的CSS3實現雞蛋餅餅狀圖loading等待轉轉轉，還有些別的東西，用一種看起來有一點類似但是好像又不一樣的方式完成了同樣的效果，題目要求的大概就是這個樣子：

開始

琢磨了一下，睡一覺起來畫了個圖，理順了一下，不過感覺此圖有點難意會啊啊啊啊啊，沒關系，小花會在后文一點一點解釋噠~(紅跟粉代表顏色，斜杠后面是z-index的值)

原理

這個東西分為兩部分：外圈和內圓。顏色這東西都自定義啦，不過我畫的的圈圈好像有點太大，然后動畫時間是隨便設的，反正轉起來看著感覺有點怪怪的額

先上html結構

外圈和內圓是通過position定位重合在一起，實質上外圈轉完2圈，內圓的紅色和粉色才各轉完1圈（內圓的全程包括紅色從1到0、粉色從1到0），所以內圓的動畫時間應該是外圈的兩倍！！！

1、外圈  

外圈很簡單，設置border-radius:50%即可畫出一個圓，然后設置三條邊框為紅色，另外一條為透明，即畫出了四分之三個圓邊框（即外圓）。

接下來是外圈的動畫，為其設置的動畫就是旋轉一圈，infinite表示無限次

其中rotate(120deg)為旋轉起始位置，可根據實際情況調整。

至此外圈就完成了，比較麻煩的是下面的內圓，不過根據圖示應該是可以想象的。