css3制作动态进度条有百分数,实现CSS3动态进度条及JQUERY百分比数字显示

在网页设计中，想必一个精彩的进度条将会为你的网站增添不少的精彩，一个好的网页设计往往体现在一些小的细节上面，细节决定了成功与否。在此之前也为大家分享了一些关于进度条的设计 ―让人不得不爱的22个UI进度条设计。有了设计理念和作品，那我们怎么用最精彩的方法运用到我们的网页制作当中呢﹖今天就为大家分享一个利用css3制作动态进度条以及附加jQuery百分比数字显示。其效果对比flash来说却毫不逊色，有一个精致的动画进度条，上面还有当前进度的百分比数字显示，而且还会跟着进度条而移动。相信追求新颖的朋友来说一定会非常的喜欢。

HTML代码

HTML的代码非常简单，只要为进度条提供一个容器就可以了。基本的HTML代码如下：

Loading

Please wait...(By:www.jiawin.com)

CSS样式表

接下来是为我们的进度条定义样式，这里主要运用了CSS3的linear-gradient的渐变属性、border-radius的圆角属性、box-shadow的阴影属性等等，来制作出进度条的初步模型。完成进度条的模型后我们利用animation属性，让进度条开始动起来，就其中的进度条动画设置代码如下：.load-bar-inner {

height: 99%;

width: 0%;

border-radius: inherit;

position: relative;

background: #c2d7ac;

background: linear-gradient(#e0f6c8, #98ad84);

box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 1px 5px rgba(0, 0, 0, 0.3), 0 4px 5px rgba(0, 0, 0, 0.3);

animation: loader 10s linear infinite;

}

如果接触了CSS3的朋友，相信大多数人对这个属性都比较熟悉了，在这里大概的说明一下animation设置的参数：

设置对象所应用的动画名称：loader

设置对象动画的持续时间：10s

设置对象动画的过渡类型：linear (线性过渡，等同于贝塞尔曲线)

设置对象动画的循环次数：infinite (无限循环)

&