动态进度条在特定宽度处停止

Question

我正在尝试在JavaScript中创建一个动态进度条，但我遇到了让它运行的问题。现在它一直到100％，但我希望它停在定义的宽度而不是。

这是我的代码：

<div class="progress">
   <div class="progress-bar progress-bar-success progress-bar-striped 
   active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria- 
   valuemax="100" style="width:40%"> x </div></div>

<div class="progress">
   <div class="progress-bar progress-bar-info 
    progress-bar-striped active" role="progressbar" aria-valuenow="50" 
    aria-valuemin="0" aria-valuemax="100" style="width:50%">y</div></div>

<div class="progress">
   <div class="progress-bar progress-bar-warning 
    progress-bar-striped active" role="progressbar"aria-valuenow="20"
    aria-valuemin="0" aria-valuemax="100" style="width:20%">z</div></div>

----------------------------------------------------------------------------
 <script type="text/javascript">
    var i = 0;
     function makeProgress(){
     if(i < 100){
        i = i + 1;
        $(".progress-bar").css("width", i + "%"); 
     }
     setTimeout("makeProgress()",30);
    }
    makeProgress();
  </script>