.progress-bar默认样式的进度条，.progress-bar-success进度条组件使用与按钮和警告框相同的类，根据不同情境展现相应的效果。.progress-bar-striped通过渐变可以为进度条创建条纹效果，IE9 及更低版本不支持。.active使其呈现出由右向左运动的动画效果。IE9 及更低版本的浏览器不支持。

HTML代码：

<div class="progress" style="display:none;">
    <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">0%</div>
</div>
<button type="button" onclick="begin()">开始</button>

Jquery代码：

function begin(){
    $('.progress').show();
    var index = 0;
    var successIcon = false;
    setInterval(function(){
      index++;
      if(index > 100){
         return false;
      };
      if(successIcon){
         $(".progress-bar").attr("aria-valuenow",100).css("width",100 + "%").text(100 + "%");
      }else{
         if(index >= 80){$(".progress-bar").attr("aria-valuenow",80).css("width",80 + "%").text(80 + "%");
      }else{
         $(".progress-bar").attr("aria-valuenow",index).css("width",index + "%").text(index + "%");
      }
    }
  },50);
  successIcon = true;
}