JQuery进度条

需要实现效果如下图。

页面代码
<div class=\'progress_bar\' data-color=\'#f66\' data-per=\'"+list[i].percent+"\' data-width=\'180\'><span></span></div><label class=\'progress_bar_label\'>100%</label>

第一次进入页面调用。或每次赋值或更改值时调用方法

function updataProgressBar(){ //更新进度条信息

　　//进度条设置
　　var $color=$(\'.progress_bar\').attr(\'data-color\');　　//data-color 为进度条颜色 例#ff6600
　　$(\'.progress_bar\').each(function () {
　　var per=$(this).attr(\'data-per\'); 　　　　　　　　 　　 //data-per 为进度条 进度值 1-100
　　var barWidth=$(this).attr(\'data-width\'); 　　　　 　　 //data-width 为进度条宽度 值自定义 单位自动填充px
　　$(this)
　　.find(\'span\').css({\'background\' : $color , \'width\' : per + \'%\'})
　　.parent().css({\'width\' : barWidth})
　　.next().text(per+\'%\');
　　})
}