js 实现进度条

进度条的实现方法就是：通过js 动态的改变一个div的宽度。在本例中用到了css3的属性，进度条背景使用了渐变的效果。

 

<style type="text/css">

.progress{width:50%;margin:0 auto;text-align:center;}

.bgBar{width:100%;border:1px solid #bdbdbd;}

.bar{height:30px;text-align:left;width:0;

background: -webkit-gradient(linear, left top, left bottom, from(#3F8FD2), color-stop(0.5, #f2f2f2), to(#3F8FD2));

background: -moz-linear-gradient(top,#3F8FD2,#f2f2f2,#3F8FD2);

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3F8FD2', endColorstr='#f2f2f2', GradientType='0');

}

 

</style>