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; }
我们为外层容器添加了边框、圆角、阴影和渐变背景,效果如下图所示: