11.06 20個加載動畫特效，學前端的不容錯過

隨緣，喜歡勿錯過，

願能成為你的“乾貨助手”，

雖不能一起慢慢變老，但可以慢慢進步。

000

寫在前面

文章2700+字，閱讀全文預計8分鐘，喜歡的可以幫忙分享一下，每天給大家帶來不一樣乾貨，快來和我一起慢慢。。。

今天我們翻的牌子是“前端”，文章不長，另外附上20張動畫效果，每一個都有源碼，需要的可以直接去看看，動畫看起來超級棒，小編一個後端的肯定寫不出這麼優美的效果。

001

正文開始

前言

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

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

一起來 Enjoy 吧！

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

1、CSS loader
源碼地址：http://codepen.io/CKH4/pen/ZGNyep/

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

2、Rainbow Loader

源碼地址：http://codepen.io/jackrugile/pen/JddmaX/

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

3、Redirecting Loader

源碼地址：http://codepen.io/mr_alien/pen/FDLjg/
作者：@mr_alien

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

源碼地址：http://codepen.io/mattiabericchia/pen/azNyBo/

作者：@mattiabericchia

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

5、Light Loader

源碼地址：http://codepen.io/jackrugile/pen/BlDjk/

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

6、CSS3 Infinite Loader

源碼地址：http://codepen.io/jonathansilva/pen/GhkAI/

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

7、CSS Stairs Loader

源碼地址：http://codepen.io/ispal/pen/mVaaJe/

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

8、CSS Loader

源碼地址：http://codepen.io/code_dependant/pen/bjFgq/

作者：@code_dependant

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

9、Loader

源碼地址：http://codepen.io/majci23/pen/NqdXvy/

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

10、Rubik loader

源碼地址：http://codepen.io/FilipVitas/pen/aNLgZz/

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

11、CSS3 Loader Animation &ndash Peeek

源碼地址：http://codepen.io/rss/pen/lKBaJ/

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

12、Pure Css Loader &ndash Square

源碼地址：http://codepen.io/dghez/pen/Czuqn/

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

13、Cocktail Loader
源碼地址：http://codepen.io/MarcMalignan/pen/svLux/

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

14、Loader a Day (day 2)
源碼地址：http://codepen.io/TheDutchCoder/pen/mgswv/

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

15、Polygon Loader
源碼地址：http://codepen.io/dan_reid/pen/rwhDf/

受到 polygon.com 網站啟發製作的加載動畫，利用 Haml+SCSS 實現的。

16、Code Loader in CSS
源碼地址：http://codepen.io/depy/pen/Gqtwv/

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

17、One element four color loader

源碼地址：http://codepen.io/tstoik/pen/Ywgxqb/

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

18、Loader #1

源碼地址：http://codepen.io/samueljweb/pen/LbGxi/

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

19、Let’s load stuff

源碼地址：http://codepen.io/tomchewitt/pen/yNdQrO/

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

20、Another Loading Animation

源碼地址：http://codepen.io/redouglas/pen/vCgwc/

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

010

正文部分均引用下述文章，引用多篇的話，會有多個聲明，無先後順序。畢竟原創大佬不易，作為一個搬運工，渴望有朝一日也寫出我的原創文。此外，文章在排版樣式上可能與參考文章不符或小部分變動，請諒解。