jquery - 将计数器移动到进度条 Bootstrap 3 的下方和右侧

Question

所以，我正在为我的网站使用 Bootstrap 3，我需要一些关于进度条的帮助。 我想将计数器移动到进度条下方，还有另一个示例是将计数器移动到进度条的右侧。 http://getbootstrap.com/components/#progress

这是一个演示:http://jsfiddle.net/83Qhw/

HTML:

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="50" style="width: 0%;">
    <span class="sr-only">100%</span>
    </div>
</div>

CSS:

.progress {
    background: linear-gradient(#D6D9DB, #E4E7E9) repeat scroll 0 0 #D6D9DB;
    border: 1px solid #B3B3B3;
    border-collapse: separate;
    border-radius: 4px;
    box-shadow: 1px 1px 1px #FFFFFF, 0 1px 3px 0 rgba(0, 0, 0, 0.1) inset;
    display: table-cell;
    overflow: visible;
    position: relative !important;
    vertical-align: middle;
    width: 200px;
    }

.progress .progress-bar {
    background: #75b1d9;
    background: -webkit-linear-gradient(top,  #75b1d9 0%,#3f81ad 50%,#3f81ad 51%,#1f72aa 52%,#1e73ac 100%);
    background: linear-gradient(to bottom,  #75b1d9 0%,#3f81ad 50%,#3f81ad 51%,#1f72aa 52%,#1e73ac 100%);
    border: 1px solid #257fbd;
    box-shadow: 0 -1px 0 #176396 inset;
    line-height: 18px;
    }

先谢谢你， 克里斯

Answer 1

下面将让您了解如何完成此操作 - 但您可能希望稍微清理一下代码。

Underneath

HTML

    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="50" style="width: 0%;">
        </div>
    </div>
    <span id='counter'></span>

JS:

setTimeout(function(){
    $('.progress .progress-bar').each(function() {
        var me = $(this);
        var perc = me.attr("aria-valuemax");
        var current_perc = 0;
        var progress = setInterval(function() {
            if (current_perc>=perc) {
                clearInterval(progress);
            } else {
                current_perc +=1;
                me.css('width', (current_perc)+'%');
            }
            $('#counter').text((current_perc)+'%');
        }, 50);
    });
},100); 

CSS

.progress {
    background: linear-gradient(#D6D9DB, #E4E7E9) repeat scroll 0 0 #D6D9DB;
    border: 1px solid #B3B3B3;
    border-collapse: separate;
    border-radius: 4px;
    box-shadow: 1px 1px 1px #FFFFFF, 0 1px 3px 0 rgba(0, 0, 0, 0.1) inset;
    display: table-cell;
    overflow: visible;
    position: relative !important;
    vertical-align: middle;
    width: 200px;
    }

.progress .progress-bar {
    background: #75b1d9;
    background: -webkit-linear-gradient(top,  #75b1d9 0%,#3f81ad 50%,#3f81ad 51%,#1f72aa 52%,#1e73ac 100%);
    background: linear-gradient(to bottom,  #75b1d9 0%,#3f81ad 50%,#3f81ad 51%,#1f72aa 52%,#1e73ac 100%);
    border: 1px solid #257fbd;
    box-shadow: 0 -1px 0 #176396 inset;
    line-height: 18px;
    height:15px;
    }

Right

注意。与上面相同的 JS 和 HTML。

CSS

.progress {
    background: linear-gradient(#D6D9DB, #E4E7E9) repeat scroll 0 0 #D6D9DB;
    border: 1px solid #B3B3B3;
    border-collapse: separate;
    border-radius: 4px;
    box-shadow: 1px 1px 1px #FFFFFF, 0 1px 3px 0 rgba(0, 0, 0, 0.1) inset;
    display: inline-block;
    overflow: visible;
    position: relative !important;
    vertical-align: middle;
    width: 200px;
    }

.progress .progress-bar {
    background: #75b1d9;
    background: -webkit-linear-gradient(top,  #75b1d9 0%,#3f81ad 50%,#3f81ad 51%,#1f72aa 52%,#1e73ac 100%);
    background: linear-gradient(to bottom,  #75b1d9 0%,#3f81ad 50%,#3f81ad 51%,#1f72aa 52%,#1e73ac 100%);
    border: 1px solid #257fbd;
    box-shadow: 0 -1px 0 #176396 inset;
    line-height: 18px;
    height:15px;
    }
#counter{
    display:inline-block;
}