用CSS3实现动画进度条

 

    CSS3的新特性为我们实现漂亮的进度条扫清了障碍，我们可以完全不需要任何图片和简单的Javascript代码就可以构建。

一、第一个例子

    效果图：

    Demo地址：http://namepk.sinaapp.com/demo/progress.html。

1、  基本的HTML

    HTML代码非常简单：

<div id="loading-status"> <div id="precent"></div> </div> 

    loading-status表示外层的容器，precent表示进度条。

2、  CSS代码

#loading-status { width: 300px; border: 1px #669CB8 solid; -webkit-box-shadow: 0px 2px 2px #D0D4D6; height: 15px; -webkit-border-radius: 10px; background: -webkit-gradient(linear, 0 0, 0 100%, from(#E1E9EE), to(white)); padding: 1px; } 

    我们为外层容器添加了边框、圆角、阴影和渐变背景，效果如下图所示：

    进度条的CSS