Question

我正在使用bootstrap进度条继承代码：

<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);
          }

它的作品，但我想在进度条中间显示百分比，我该怎么做？

Answer 1

您需要将100%作为innerHTML添加到进度条DIV。并通过你的js更改innerHTML。

试试这个 -

这就是它的外观

           $(".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);

如何在bootstrap pregress栏中间显示百分比

1 个答案: