雖然互聯(lián)網(wǎng)的連接速度已經(jīng)變得越來(lái)越快，但是在登錄一些網(wǎng)站時(shí)，難免會(huì)出現(xiàn)等待網(wǎng)頁(yè)的加載的時(shí)候。而設(shè)計(jì)師們也挖空心思的使用各種創(chuàng)意動(dòng)畫，讓你的等待時(shí)間變得有趣，不至于很痛苦。
加載程序顯示了進(jìn)程正在運(yùn)行。然而，為了確保你在等待完成加載的過程前不會(huì)離開，加載程序的秘密就在于那些注意細(xì)節(jié)的有趣動(dòng)畫。在本文中，你會(huì)發(fā)現(xiàn) 20 個(gè)很棒的加載動(dòng)畫，供你選擇與參考。同時(shí)，你可以將它們下載并使用在自己的網(wǎng)站或項(xiàng)目上。
一起來(lái) Enjoy 吧！
譯者注： 以下 20 個(gè)加載動(dòng)畫，均來(lái)自 CodePen.
-
CSS loader
--
作者：@CKH4
這是一個(gè)利用 Slim+CSS 預(yù)處理器 Stylus 實(shí)現(xiàn)的簡(jiǎn)單動(dòng)畫。作者寫代碼很精煉、簡(jiǎn)潔。
作者：@jackrugile
為客戶端改良的純 CSS 實(shí)現(xiàn)的彩虹加載動(dòng)畫。
-
Redirecting Loader
--
作者：@mr_alien
為了將用戶重新定向到另一個(gè)頁(yè)面，而利用 HTML+CSS 實(shí)現(xiàn)的加載動(dòng)畫。
-
Loader CSS
--
純 CSS 實(shí)現(xiàn)的循環(huán)加載動(dòng)畫。
-
Light Loader
--
作者：@jackrugile
CSS+JS 實(shí)現(xiàn)的艷麗火花效果的 Canvas 加載動(dòng)畫。
用 CSS3 和 Html 制作的無(wú)限加載動(dòng)畫。
作者：@ispal
純 CSS 實(shí)現(xiàn)的樓梯循環(huán)加載動(dòng)畫。
-
CSS Loader
--
Haml+Sass 實(shí)現(xiàn)的循環(huán)加載動(dòng)畫。
-
Loader
--
作者：@majci23
純 CSS 實(shí)現(xiàn)的循環(huán)加載動(dòng)畫。
-
Rubik loader
--
作者：@FilipVitas
HTML +Sass 實(shí)現(xiàn)的魔方加載動(dòng)畫。
作者：@rss
由 Mikael Edwards 設(shè)計(jì)并由 R?zaSel?ukSaydam 為 Peeek 開發(fā)的加載動(dòng)畫。利用 Haml + SCSS 實(shí)現(xiàn)的。
作者：@dghez
純 SCSS 實(shí)現(xiàn)的正方形加載動(dòng)畫。
利用 CSS 與少量的 jQuery 實(shí)現(xiàn)的雞尾酒加載動(dòng)畫。
靈感啟發(fā)！一個(gè)純 CSS 實(shí)現(xiàn)的 iMac/iPad/iPhone 變換加載動(dòng)畫。
作者：@dan_reid
受到 polygon.com 網(wǎng)站啟發(fā)制作的加載動(dòng)畫，利用 Haml+SCSS 實(shí)現(xiàn)的。
作者：@depy
一款純 CSS 加載動(dòng)畫，創(chuàng)意還是蠻有意思的。
作者：@tstoik
利用 SCSS 寫的很酷的加載動(dòng)畫。
-
Loader #1
--
作者：@samueljweb
利用棍狀圖形實(shí)現(xiàn)的加載動(dòng)畫。
作者：@tomchewitt
純 CSS 實(shí)現(xiàn)的有趣的加載動(dòng)畫。
作者：@redouglas
一個(gè)簡(jiǎn)單的旋轉(zhuǎn)加載動(dòng)畫。
如果覺得文章不錯(cuò)，不妨點(diǎn)個(gè)贊。_
注：
- 本文在翻譯的基礎(chǔ)上，補(bǔ)充了相應(yīng)的解釋?；蛟S能對(duì)你起到參考與幫助的作用；
- 本文版權(quán)歸原作者所有。如需轉(zhuǎn)載譯文，煩請(qǐng)注明出處，謝謝！
英文原文：20 Awesome Animated Loaders and Spinners
作者： Nancy Young
譯者：IT程序獅
譯文源自：http://m.itdecent.cn/p/6d3aafe8240f
