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

});