如何顯示在引導pregress欄的中間百分比

我使用的引導進度條繼承人的代碼：如何顯示在引導pregress欄的中間百分比

<div class="col-xs-12 col-sm-12 progress-container"> 
    <div class="progress progress-striped active"> 
      <div class="progress-bar progress-bar-success" style="width:0%"> 

     </div> 
      </div> 
       </div>

角碼：

dashboard.getPercentage = function() { 
      $(".progress-bar").animate({ 
       width: "100%", 

      }, 2500); 
      }

它的作品，但我想說明的百分比在進度條中間，我該怎麼做？

來源

2017-03-09 abdellatif zoumhane

把寬度變成一個變量。你可以在程序欄中使用變量並顯示它。 –

您需要將100%作爲innerHTML添加到您的progressbar DIV。並通過您的js更改innerHTML。

嘗試this--

這是怎麼會看

  $(".progress-bar").animate({ 
 
       width: "100%", 
 
      
 
      }, 2500); 
 
      var interval = setInterval(function() { 
 
     $('.progress-bar').html("100%"); 
 
     
 
    }, 5000);

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
      
 
      
 
<body > 
 
    
 

 
<div class="col-xs-12 col-sm-12 progress-container"> 
 
     <div class="progress progress-striped active"> 
 
       <div class="progress-bar progress-bar-success" aria-valuenow="0" style="width:0%"> 
 
    0% 
 
      </div> 
 
       </div> 
 
        </div> 
 
    </body>

你的JS可能是這樣的。 JS不是很好，但試圖幫助

  $(".progress-bar").animate({ 
      width: "100%", 

     }, 2500); 
     var interval = setInterval(function() { 
    $('.progress-bar').html("100%"); 

}, 5000);

來源

2017-03-09 15:41:30 neophyte

謝謝你的aswer ..但我想這樣dynamiclly ...我的意思是從10％，然後40％....直到100％是可能的 –

是的，這是可能的..引用我在下面的答案問題請[http://stackoverflow.com/questions/42422099/bootstrap-progress-bar-update-status-text-at-intervals-completed-25-50-75-1/42422557#42422557] – neophyte

感謝它的幫助。 –

如何顯示在引導pregress欄的中間百分比

回答

相關問題