js进度条实现

/*#region 进度条 */
.progbar {
      
      
    background-color: #e1e1e1;
    width:auto;
    color: #222;
    height: 16px;
    text-align: center;
    position: relative;
    float:left;margin:5px 0 0 5px;
}

.progbar .bar {
      
      
    background-color: #389afb;
    height: 16px;
    width: 0;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
}

.progbar .text {
      
      
    height: 16px;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    line-height: 16px;
    z-index: 20;
}
/*#endregion */

//加载进度条，原创  num：百分比：width：宽度
$.fn.progress = function (num, width) {
    var thm = '<div class="progbar" style="width: ' + width + 'px;"><div class="text">' + num + '%</div><div class="bar" style="width: ' + num + '%;"></div></div>';
    this.append(thm);
    return this;
}

<div id="bar"></div>

$(function () {
    $('#bar').progress(10, 200);
}