jQuery+CSS3实现带阴影的3D进度条插件

3D 进度条看起来很有空间感。比起平面进度条，3D 进度条更能带来好的用户体验和炫酷的加载效果。本文将借助 jQuery 和 CSS3 来实现一款带有阴影的 3D 进度条插件。

下面我们先看看效果。

该进度条插件非常炫酷，基于 jQuery/CSS3 实现，这款进度条插件的特点是带有阴影，外观看起来有着3D立体的视觉效果。另外进度条实体部分可以利用 CSS3 相关特性绘制任意效果的填充物，可以是渐变颜色，也可以是网格形状，同时我们可以动态设置进度条的当前值。

下面介绍它的用法，首先是html代码：

<div class="progress-factor flexy-item">
    <div class="progress-bar">
        <div class="bar has-rotation has-colors navy ruler" role="progressbar" 
        aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" id="bar-0_0">
            <div class="tooltip white"></div>
            <div class="bar-face face-position roof percentage"></div>
            <div class="bar-face face-position back percentage"></div>
            <div class="bar-face face-position floor percentage volume-lights"></div>
            <div class="bar-face face-position left"></div>
            <div class="bar-face face-position right"></div>
            <div class="bar-face face-position front percentage volume-lights shine"></div>
        </div>
    </div>
</div>

最后引入该插件的 component.css 和 custom-bars.css 即可。别忘了 jQuery 的引入哦。本实例代码已共享到了百度网盘，链接：http://pan.baidu.com/s/1dFrQqFv 密码：z3hc

： » jQuery+CSS3实现带阴影的3D进度条插件