HTML如何做出这种效果的进度条

 HTML

要求输入后面的值之后，进度条可以自己对应比例的显示




span{display:inline-block;*display:inline-block;zoom:1;}

.bg{width:300px;height:20px;border-radius:10px;background:#3D3C3A;}

.main{height:20px;border-radius:10px;background:#55404C;}

 

<span class="bg">

    <span class="main"></span>

</span>

<span class="num">70%</span>

 

$(function(){

    var _width = $('.num').text();//获取百分比数值

    $('.main').css('width',_width);//将数值赋值给main的width

});