progress

CSS3制作 Progress Bars

Progress Bar直译过来就是“进度条”,也就是说今天要和大家一起探讨进度条的作方法。我想进度条大家都有看到过,而且还随处可见,他们表示的是某个过程,显示目前完成状态。最常见的是文件的上传和下载,有一个动态的进度条,通过这个进度可的动态变化告诉我们文件上传或下载的完成程度。换而言之,无论在某一个点或一个桌面程序,或者说我们的Web应用程序或,我们都需要使用到进度条的UI制作。那么在这篇文章中,我和大家一起来学习如何使用CSS3的相关属性来创建一个时尚的、动态的进度条,而且还将扩展一部分jQuery代码,让其从0至100%动态完成。

我们首先来看一看下面的DEMO效果:

下面我们针对上面的DEMO来说说其制作过程。

Jquery和CSS3打造靓丽的动画进度条

今天在做项目中碰到一个需要用制作一个动画的进度条,一开始搞不清楚是怎么一回事,后在google中搜索了css progress bar,真的太多这样的资料,后随便弄了一个。今天贴出来与大家分享。跟我一起走吧>>>>。

CSS Globe为我们提供了一种简易实现动画进度条的方法。只需要3个元素,1个内容块和2个内嵌元素即可实现一个漂亮的动态进度条效果。只是需要注意的 是,这个效果是比较漂亮,但并能实现实时载入。而是在页面首次载入的时候,会根据你的设置,以Gif动画的形式显示进度条的载入。也就是说,可以用来美 观,但不具有交互作用。如下图所示:

返回顶部