人們討厭等待，特別是加載網(wǎng)站的時(shí)候，可有些時(shí)候由于網(wǎng)速或者瀏覽器的原因，等待總是不可避免，如果在網(wǎng)站中也能像移動(dòng)應(yīng)用一樣，有創(chuàng)意的進(jìn)度條，會(huì)很大地減少人們的焦慮，還能避免因等待過久放棄進(jìn)入這種不幸的事故。

相對(duì)于移動(dòng)端，在網(wǎng)站中使用進(jìn)度條不常見，該用哪種方式呈現(xiàn)給訪客也是一個(gè)考驗(yàn)設(shè)計(jì)師的難題。現(xiàn)在你可以來看看這10個(gè)在網(wǎng)站中創(chuàng)意運(yùn)用進(jìn)度條的設(shè)計(jì)，它們既帶給訪客樂趣，也不妨礙內(nèi)容閱讀，學(xué)習(xí)一下，讓它們?cè)跓o形的展示中留住網(wǎng)速拙急的訪客?。ù蠖鄶?shù)提供源碼，你可以很方便地學(xué)習(xí)它們）

進(jìn)度條運(yùn)用得當(dāng)可不簡(jiǎn)單，細(xì)節(jié)是魔鬼，當(dāng)你不知道如何處理這個(gè)魔鬼時(shí)，建議閱讀《談?wù)劶虞d(LOADING)的那點(diǎn)事》，你也可以從其他優(yōu)秀作品中吸取靈感：《18個(gè)讀取進(jìn)度條的優(yōu)秀設(shè)計(jì)案例》

Creative Loading Effects

這個(gè)教程非常漂亮，展示了不止一種加載進(jìn)度的方式，你可以點(diǎn)擊DEMO玩一下。

Spinning Loading

用大寫的「Loading?」，中間的O以新奇的動(dòng)態(tài)旋轉(zhuǎn)，是個(gè)非常清新的設(shè)計(jì)，提供了源碼，可以很方便應(yīng)用到你的網(wǎng)站。

Planets

看兩個(gè)萌萌的小星球在跳舞真是太好玩了，它特別適合用在卡通風(fēng)格的網(wǎng)站上。

Sinister Loadscreen

是的，看起來很邪惡的形象，不過很適合應(yīng)用在暗黑系的黑色風(fēng)格網(wǎng)站上，或者你可以用它來營(yíng)造神秘感。

Yet Another Loading Animation

這個(gè)動(dòng)效做得非常有節(jié)奏感，你可能想把它應(yīng)用在音樂風(fēng)格的網(wǎng)站上。

CProgress

Cprogress使用jQuery來展現(xiàn)一個(gè)非常酷的和易于使用的loadscreen。強(qiáng)大的是，你也能鼓搗成這幾行代碼，因?yàn)樗鼈兪峭耆啥ㄖ频模?/span>

Spin.js

一個(gè)讓世界快速旋轉(zhuǎn)的「Loading?」！你也可以通過控制右邊的滑塊來改變它的形狀，給它加點(diǎn)陰影，甚至改變旋轉(zhuǎn)的方向！

Alessio Atzeni

這教程又酷又好學(xué)，因?yàn)樗峭耆肏TML和CSS來實(shí)現(xiàn)的，還有三種進(jìn)度模板供你選擇。

Facebook-ish Loading Animation

如果你想讓網(wǎng)站看起來像Facebook，那么這個(gè)進(jìn)度條最適合你了，它的加載方式與Facebook加載圖像時(shí)一樣。

Flickr Style

如果你是Flickr的愛好者，那么這個(gè)不能錯(cuò)過，完全仿照Flickr的效果來。

原文地址：1stwebdesigner
本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，轉(zhuǎn)摘請(qǐng)注明優(yōu)設(shè)網(wǎng)譯文出處，謝謝各位小編。

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個(gè)分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程的干貨網(wǎng)站。
【特色推薦】
PS禮儀手冊(cè)：網(wǎng)頁設(shè)計(jì)師必須修煉的內(nèi)功技法，更是不可或缺的WEB設(shè)計(jì)指南http://hao.uisdc.com/ps/。
設(shè)計(jì)微博：擁有粉絲量58萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：