35个漂亮的进度条设计

标签: ShowCase 设计 进度条 | 发表时间:2012-08-29 09:00 | 作者:神飞
出处:http://www.qianduan.net
整理自: 35 Beautiful Progress Bar Designs
中文: 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

总结

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

相关 [漂亮 设计] 推荐:

漂亮的 CSS3 搜索表单设计

- 小明 - 博客园-首页原创精华区
      最近一直把玩 CSS3 相关的东西,也发现了一些新的 CSS 技巧. 你知道如何使用 border-radius 创建圆形图案、使用 box-shadow 创建内部阴影效果吗. 带你仔细阅读这份使用 CSS3 的 gradient、border-radius 及 box-shadow 属性所制作的漂亮的搜索表单案例.

16张漂亮的壁纸设计

- 月七 - Poboo
分享16张漂亮的壁纸设计,给你生活家居更增添许多乐趣,也让整个室内设计活跃起来,相信越来越多人 喜欢利用壁纸创意来设计自己的房间,大家可以参考这些创意设计,来设计你的温馨小屋. Liverpool English Pub VI设计. Khuong Nguyen 创意设计. Steve McGhee 设计作品.

35个漂亮的进度条设计

- - 前端观察
整理自: 35 Beautiful Progress Bar Designs. 中文: 35个漂亮的进度条设计. 请尊重版权,转载请注明来源,多谢. 网页中常常会在页面/内容没有完整加载前给一个进度提示,通常最简单的做法是给一个loading的gif动画图片,比如最常用的“菊花图”. 进度条是另一种表现方式,比菊花图提供更多的信息,也有更丰富的表现.

25个漂亮的导航菜单设计

- 1625 - 前端观察
原文:25个漂亮的导航菜单设计. 译自:25 Beautiful Navigation Menus. 请尊重版权,转载请注明出处,多谢. 导航菜单是网页设计中最关键的一部分,因为它们对于网站的可用性和用户体验至关重要. 导航结构比较烂或者在导航中有明显不足的网站可能会困扰用户并最终导致用户找不到想要的页面和内容而离开.

38个漂亮的电子商务网站设计

- emilo - 创意悠悠花园
在我的印象中,电子商务可以简单的理解为利用网络进行产品销售的一种行为. 今天分享:38个漂亮的电子商务网站设计,希望其中有你喜欢的或者可以给你带来灵感的. Read the rest of 38个漂亮的电子商务网站设计 (21 words). © emilo for 创意悠悠花园, 2011. Post tags: 漂亮, 电子商务, 网站设计.

45个给你灵感的漂亮信笺设计

- 远走正飞 - 创意悠悠花园
如果今天你可以收到一封来自远方朋友的信件,你会是什么样的心情呢. 今天分享:45个给你灵感的漂亮信笺设计,希望其中有你喜欢的,或者可以给你带来灵感的. Read the rest of 45个给你灵感的漂亮信笺设计 (138 words). © emilo for 创意悠悠花园, 2011. Post tags: 信笺设计, 漂亮, 灵感.

27 个漂亮的 Web 导航设计例子

- laogao - 博客园新闻频道
  很酷的使用菜单导航,优雅. All you have to do is to choose what do you wish to see in the top right corner and then just go with the flow.   本文链接:http://news.cnblogs.com/n/118212/.

视觉灵感:30个漂亮的的网站设计

- 小明 - 博客园-首页原创精华区
     在客户签合同之前会从我们的网站了解我们, 所以公司的网站设计对合同的签定与否很重要. 30个漂亮的的网站设计 灵感展示,会让你大饱眼福. 英文原稿:Visual Inspiration: 30 Beautiful Web App Site Designs. 出处:http://www.cnblogs.com/xiaoyao2011/.

[来自iPc.me] 精选 35 款漂亮的英文设计字体下载

- Simart - iPc.me
一个好的设计,除了合理的色调搭配和整体协调的结构外,字体的应用是非常值得探究的基本应用了,一个漂亮的字体应用在好的设计中,自然会起到锦上添花的加分作用……. [ 请大家更新订阅地址 http://feed.ipc.me ]. iPc.me 猜你可能还会喜欢:40款高质量的免费英文设计字体素材下载.

75佳漂亮的 CSS 网站设计作品欣赏(系列二)

- Ashaum - 博客园-梦想天空
  互联网高速发展中,每天都有成千上万的新网站诞生. 最早的网站是没有样式的,后来引入了 CSS 用来格式化结构化的网页内容,用于精确的控制网页的布局和外观. 然而因为浏览器兼容性问题,要使用 CSS 制作出高质量的网站不容易. 今天开始推出系列文章和大家分享75佳漂亮的 CSS 网页设计作品,一起欣赏.