html+css实现进度条

来源:luqidong 发布时间:2013-10-14 19:45:23 点击数:
 
实现的原理很简单就是用三个元素去嵌套来完成。元素可以随意因为我们可以用css来控制样式,这里介绍淘宝个人信息里面的实现方法。淘宝用了三个b标签元素,一个外面b标签里面嵌套2个b标签,给最外面的定宽度,里面元素一个宽度设置为100%,另一个设置为80%。颜色弄成不一样的,然后用position:absolute;来让2个b标签重合,这样就可以实现一个精度条的效果了,如果控制进度条的动画效果,只需要获取进度元素给它设置一个定时器,来完成进度条的加减。
<b class="pf-step-box">
        <b class="pf-current J_PfCurrent" style="width: 90%;"></b>
        <b class="pf-expect J_PfExpect" style="width: 10%;"></b>
    </b>