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+'%');
　　})
}

 

转载于:https://www.cnblogs.com/zhan1995/p/8708404.html