精選 20 個優質的加載動畫

做者：IT程序獅
連接：https://zhuanlan.zhihu.com/p/24464355
來源：知乎
著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。
 

雖然互聯網的鏈接速度已經變得愈來愈快，可是在登陸一些網站時，不免會出現等待網頁的加載的時候。而設計師們也挖空心思的使用各類創意動畫，讓你的等待時間變得有趣，不至於很痛苦。

加載程序顯示了進程正在運行。然而，爲了確保你在等待完成加載的過程前不會離開，加載程序的祕密就在於那些注意細節的有趣動畫。在本文中，你會發現 20 個很棒的加載動畫，供你選擇與參考。同時，你能夠將它們下載並使用在本身的網站或項目上。

一塊兒來 Enjoy 吧！

譯者注： 如下 20 個加載動畫，均來自 CodePen.

1. CSS loader

做者：@CKH4

這是一個利用 Slim+CSS 預處理器 Stylus 實現的簡單動畫。做者寫代碼很精煉、簡潔。

2. Rainbow Loader

做者：@jackrugile

爲客戶端改良的純 CSS 實現的彩虹加載動畫。

3. Redirecting Loader

做者：@mr_alien

爲了將用戶從新定向到另外一個頁面，而利用 HTML+CSS 實現的加載動畫。

4. Loader CSS

做者：@mattiabericchia

純 CSS 實現的循環加載動畫。

5. Light Loader

做者：@jackrugile

CSS+JS 實現的豔麗火花效果的 Canvas 加載動畫。

6. CSS3 Infinite Loader

做者：@jonathansilva

用 CSS3 和 Html 製做的無限加載動畫。

7. CSS Stairs Loader

做者：@ispal

純 CSS 實現的樓梯循環加載動畫。

8. CSS Loader

做者：@code_dependant

Haml+Sass 實現的循環加載動畫。

9. Loader

做者：@majci23

純 CSS 實現的循環加載動畫。

10. Rubik loader

做者：@FilipVitas

HTML +Sass 實現的魔方加載動畫。

11. CSS3 Loader Animation &ndash Peeek

做者：@rss

由 Mikael Edwards 設計並由 RızaSelçukSaydam 爲 Peeek 開發的加載動畫。利用 Haml + SCSS 實現的。

12. Pure Css Loader &ndash Square

做者：@dghez

純 SCSS 實現的正方形加載動畫。

13. Cocktail Loader

做者：@MarcMalignan

利用 CSS 與少許的 jQuery 實現的雞尾酒加載動畫。

14. Loader a Day (day 2)

做者：@TheDutchCoder

靈感啓發！一個純 CSS 實現的 iMac/iPad/iPhone 變換加載動畫。

15. Polygon Loader

做者：@dan_reid

受到 http://polygon.com 網站啓發製做的加載動畫，利用 Haml+SCSS 實現的。

16. Code Loader in CSS

做者：@depy

一款純 CSS 加載動畫，創意仍是蠻有意思的。

17. One element four color loader

做者：@tstoik

利用 SCSS 寫的很酷的加載動畫。

18. Loader #1

做者：@samueljweb

利用棍狀圖形實現的加載動畫。

19. Let’s load stuff

做者：@tomchewitt

純 CSS 實現的有趣的加載動畫。

20. Another Loading Animation

做者：@redouglas

一個簡單的旋轉加載動畫。

若是以爲文章不錯，不妨點個贊。^_^

注：

1. 本文在翻譯的基礎上，補充了相應的解釋。或許能對你起到參考與幫助的做用；
2. 本文版權歸原做者全部。如需轉載譯文，煩請註明出處，謝謝！

英文原文：20 Awesome Animated Loaders and Spinners
做者： Nancy Young
譯者：IT程序獅
譯文源自：http://www.jianshu.com/p/6d3aafe8240f