將計數器移動到進度條的右側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; 
}