雖然互聯(lián)網(wǎng)的連接速度已經(jīng)變得越來越快蔗崎，但是在登錄一些網(wǎng)站時，難免會出現(xiàn)等待網(wǎng)頁的加載的時候扰藕。而設(shè)計師們也挖空心思的使用各種創(chuàng)意動畫缓苛，讓你的等待時間變得有趣，不至于很痛苦邓深。
加載程序顯示了進程正在運行未桥。然而，為了確保你在等待完成加載的過程前不會離開芥备，加載程序的秘密就在于那些注意細(xì)節(jié)的有趣動畫冬耿。在本文中，你會發(fā)現(xiàn) 20 個很棒的加載動畫萌壳，供你選擇與參考亦镶。同時日月，你可以將它們下載并使用在自己的網(wǎng)站或項目上。
一起來 Enjoy 吧缤骨！
譯者注： 以下 20 個加載動畫爱咬，均來自 CodePen.
-
CSS loader
--
作者：@CKH4
這是一個利用 Slim+CSS 預(yù)處理器 Stylus 實現(xiàn)的簡單動畫。作者寫代碼很精煉绊起、簡潔精拟。
作者：@jackrugile
為客戶端改良的純 CSS 實現(xiàn)的彩虹加載動畫。
-
Redirecting Loader
--
作者：@mr_alien
為了將用戶重新定向到另一個頁面虱歪，而利用 HTML+CSS 實現(xiàn)的加載動畫蜂绎。
-
Loader CSS
--
純 CSS 實現(xiàn)的循環(huán)加載動畫。
-
Light Loader
--
作者：@jackrugile
CSS+JS 實現(xiàn)的艷麗火花效果的 Canvas 加載動畫笋鄙。
用 CSS3 和 Html 制作的無限加載動畫荡碾。
作者：@ispal
純 CSS 實現(xiàn)的樓梯循環(huán)加載動畫。
-
CSS Loader
--
Haml+Sass 實現(xiàn)的循環(huán)加載動畫局装。
-
Loader
--
作者：@majci23
純 CSS 實現(xiàn)的循環(huán)加載動畫坛吁。
-
Rubik loader
--
作者：@FilipVitas
HTML +Sass 實現(xiàn)的魔方加載動畫。
作者：@rss
由 Mikael Edwards 設(shè)計并由 R?zaSel?ukSaydam 為 Peeek 開發(fā)的加載動畫铐尚。利用 Haml + SCSS 實現(xiàn)的拨脉。
作者：@dghez
純 SCSS 實現(xiàn)的正方形加載動畫。
利用 CSS 與少量的 jQuery 實現(xiàn)的雞尾酒加載動畫宣增。
靈感啟發(fā)玫膀！一個純 CSS 實現(xiàn)的 iMac/iPad/iPhone 變換加載動畫。
作者：@dan_reid
受到 polygon.com 網(wǎng)站啟發(fā)制作的加載動畫爹脾，利用 Haml+SCSS 實現(xiàn)的帖旨。
作者：@depy
一款純 CSS 加載動畫，創(chuàng)意還是蠻有意思的灵妨。
作者：@tstoik
利用 SCSS 寫的很酷的加載動畫解阅。
-
Loader #1
--
作者：@samueljweb
利用棍狀圖形實現(xiàn)的加載動畫。
作者：@tomchewitt
純 CSS 實現(xiàn)的有趣的加載動畫泌霍。
作者：@redouglas
一個簡單的旋轉(zhuǎn)加載動畫货抄。
如果覺得文章不錯，不妨點個贊朱转。_
注：
- 本文在翻譯的基礎(chǔ)上蟹地，補充了相應(yīng)的解釋√傥或許能對你起到參考與幫助的作用怪与；
- 本文版權(quán)歸原作者所有。如需轉(zhuǎn)載譯文缅疟，煩請注明出處分别，謝謝遍愿！
英文原文：20 Awesome Animated Loaders and Spinners
作者： Nancy Young
譯者：IT程序獅
譯文源自：http://www.reibang.com/p/6d3aafe8240f
