进度条是Web页面中常见的一种组件，早前在《CSS3制作 Progress Bars》一文中介绍了使用CSS3制作水平进度条。但往往我们很多时候需要使用到圆形进度条。那么今天在这篇文章中由@我是霍小惑同学向大家介绍如何使用jQuery和CSS3实现圆形进度条效果。整个教程图文并茂，非常容易理解。在这里非常感谢@我是霍小惑加入w3cplus与大家一起分享。

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

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

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

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

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