35个美观的进度条风格

网页中常常会在页面/内容没有完整加载前给一个进度提示，通常最简单的做法是给一个loading的gif动画图片，比如最常用的“菊花图”。进度条是另一种表现方式，比菊花图提供更多的信息，也有更丰富的表现。

通常，之前进度条会更多的用在桌面程序或网页中flash加载过程中显示，而现在，基于HTML5的web app特别是web game有时候也需要使用进度条来表现加载状态，它的最大作用是给用户一种心理暗示，告诉他大概需要等待多久。所以，进度条设计是让用户耐心等待你的应用/页面加载完的关键。

下面是一些非常漂亮的进度条设计，看着这些漂亮的界面，我想大部分人都不会介意多等待一会儿～～

我倒是非常好奇这些界面的前端实现 :P

Adobe Inspired Bar

Chubby Loading Bar

Colourful Progress Bars

Dark Loading Bar

Dark Progress Loaders

Circular Progress Loader

GUi Loading Bar

HUD Progress Bar

Minimalist Loading Bar

Modern Progress Bar

Pretty Progress Bar

Percentage Progress Bar

Simple Bar

Time Progress Bar

Progress Pop-Up

Radial Progress Display

Thin Rugged Loading Bars

Futuristic Progress Bar

Subtle Progress Bar

Progress Bar

Coloured Progress Bars

Circular Progress Bars

Clean & Simple Loading Bar

Grungy Colours

Red to Green Download Bar

Modal Progress Bars

Progress Bars with Percentage

Pink Progress Bars

Stone-Style Loading Bars

Clever Progress Bar

Minimal Green Bar

Marshmallow Loader Bars

Please Wait

Colour-Changing Progress Bar

Slick Percentage Bar

总结

优秀的网页设计师不会放过他们网站上的每一个细节，甚至最不起眼的进度条设计都能提升网站的整体体验。然后，前端开发工程师们也需要用自己的代码来提升网站的每一处细节的使用体验了。