进度条

一、运行原理

Progress进度条组件由两个HTML元素、一些CSS宽度设置以及一些属性构建。我们不使用 HTML5 <progress> 元素，确保用户可以方便的平行堆叠进度条、加上动态效果，并在共上放置文本标签。

• 使用 .progress 容器来指定进度条的最大值。
• 使用 .progress-bar 来表示当前的进度。
• .progress-bar 要求的内嵌样式，使用全局实用CSS或自定义CSS来设置其宽度。
• .progress-bar 还需要一些 role and 与属性，使其访问友好（无障碍）。

Bootstrap提供了一些用于 设置宽度的通用样式设置。根据您的需要，这可能有助于快速配置进度条组件。

二、标签

在.progress-bar 中放置文字內容,可将标签添加到进度条中。

三、高度

我们只在.progress上设置了一个height值，所以如果你改变了这个值，那么内部的 .progress-bar 高度会自动调整大小。

四、背景

使用背景通用样式 Class 样式来定义进度条的外观。

五、多进度条进度（嵌套）

如果有需要，可在进度组件中包含（嵌套）多个进度条。

六、条纹进度指示

将.progress-bar-striped 添加到 .progress-bar 上，可以使用CSS渐变对背景颜色加上条纹效果。

七、动画条纹进度指示

条纹渐变也可以做成动画效果，将.progress-bar-animated 加到 .progress-bar 上，即实现CSS3绘制的从右到左的动画效果。

动画条纹进度条不适用于 Opera 12浏览器—因为它不支持 CSS3 动画。