js进度条实现

js进度条实现

1、先设置CSS样式（可自定义）

/*#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 */

2、jQuery 函数

//加载进度条，原创  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;
}

3、定义html

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

4、使用

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

效果：

posted on 2016-10-10 23:30 hllive 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/hllive/p/5947719.html