提供工作或动作的实时反馈,只用简单且灵活的进度条。

进度条使用了CSS3的transition和animation属性来完成一些效果。这些特性在Internet Explorer 9或以下版本中、Firefox的老版本中没有被支持。Opera 12不支持animation属性。

基本类型

进度条 描述
40% Complete (success)

40%

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>

默认的进度条。为.progress-bar应用CSS的width值(%)来更改进度值。

颜色主题

为了一致的样式,进度条颜色使用与按钮相同的类。

进度条。 描述
40% Complete (success)

40%

主要/默认

40% Complete (success)

40%

.progress-bar-info

40% Complete (success)

40%

.progress-bar-success

60% Complete (warning)

40%

.progress-bar-warning

80% Complete (danger)

40%

.progress-bar-danger

特殊效果

用一个渐变可以创建条纹效果,在IE8中不可用。

进度条 描述
40% Complete (success)

40%

条纹效果:.progress-striped
45% Complete

40%

动画效果。给.progress-striped加上.active使它由右向左运动。在IE的所有版本不可用。

35% Complete (success)
20% Complete (warning)
10% Complete (danger)

堆叠效果。把多个进度条放入同一个.progress,使它们堆叠。

<!-- 条纹效果 -->
<div class="progress progress-striped">
  <div class="progress-bar" role="progressbar progress-bar-success" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<!-- 动画效果 -->
<div class="progress progress-striped active">
  <div class="progress-bar" role="progressbar progress-bar-success" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<!-- 堆叠效果 -->
<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>