前言

loading等待效果圖對於前端頁面或者APP展示來說是非常常見的，目前大多數的效果圖都是GIF的格式。鑑於GIF格式的圖會比較大，我們完全可以使用CSS去實現一個漂亮的loading效果，今天我們就一起來看看吧。

CSS3

如果有感興趣的可以去github上看源碼，github地址為：

https://github.com/zhouxiongking/article-pages/blob/master/articles/loading-pie/loading-pie.html

效果圖

首先，我們一起來看下使用CSS3編寫的loading效果圖，如下所示。

loading效果圖

效果分析

針對上面的loading效果，我們進行仔細的分析，整體loading效果是由內圓和外圓組成。

內部圓實際是由四個半圓組成，2個左半圓，2個右半圓，每側的兩個半圓通過顏色深淺進行區分，當然顏色大家可以隨便選取，然後通過定義動畫，在不同的時間節點通過z-index屬性顯示不同的半圓，剛好組成一個完整的旋轉效果。

頁面實現

這部分我們來看看頁面是如何通過代碼實現的。

• HTML

首先是頁面的HTML代碼，正如上面的分析，首先要具有內圓和外圓兩個div，然後內圓是通過4個半圓實現，實際內部是4個div，因此我們可以得到以下的HTML部分代碼。

頁面HTML代碼

• CSS

其實最核心的部分就是CSS代碼，我會慢慢分析如何寫出CSS部分的代碼。

首先是外圓部分，實際是一個完整的div通過border屬性構成3/4的圓，然後通過動畫轉動這個3/4的圓。因此我們可以直接得出外圓的所有樣式如下。

外圓及其動畫樣式

然後是內圓部分，內圓實際是一個完整的div，通過border-radius屬性得到完整的圓，其樣式如下。

內圓外圈屬性

其次是內部四個半圓的樣式，分為左邊和右邊兩個部分，左邊和右邊每個部分因為顏色上有區別，需要定義不同的動畫。其中左邊兩個半圓的通用屬性如下。

左邊半圓通用屬性

左半邊深色圓的動畫樣式如下。

左半邊深色圓動畫

左半邊淺色圓的動畫效果如下。

左半邊淺色圓動畫

右半邊兩個半圓通用樣式如下。

右半邊兩個半圓通用樣式

右半邊深色圓有動畫效果，而淺色圓沒有動畫效果，它們的樣式如下。

右半邊深淺色半圓樣式

至此，所有的CSS樣式講解完畢，如果大家完整運行後就可以得到文章開始的效果。

結束語

本篇文章主要講解了如何使用CSS3動畫來製作一個loading效果圖，感興趣的可以直接去github上看源碼，希望對你有所幫助~