• 进度条(Progress)
    • 运行原理
    • 标签
    • 高度
    • 背景
    • 多进度条进度（嵌套）
    • 条纹进度指示
    • 动画条纹进度指示

    进度条(Progress)

    使用Bootstrap自定义进度条的文档和示例，支持平行条状堆叠、动画背景和文本标签。

    运行原理

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

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

    进度条(Progress) - 图1

    1. <div class="progress">
    2.   <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
    3. </div>
    4. <div class="progress">
    5.   <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
    6. </div>
    7. <div class="progress">
    8.   <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
    9. </div>
    10. <div class="progress">
    11.   <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
    12. </div>
    13. <div class="progress">
    14.   <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
    15. </div>

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

    进度条(Progress) - 图2

    1. <div class="progress">
    2.   <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
    3. </div>

    标签

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

    进度条(Progress) - 图3

    1. <div class="progress">
    2.   <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
    3. </div>

    高度

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

    进度条(Progress) - 图4

    1. <div class="progress" style="height: 1px;">
    2.   <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
    3. </div>
    4. <div class="progress" style="height: 20px;">
    5.   <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
    6. </div>

    背景

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

    进度条(Progress) - 图5

    1. <div class="progress">
    2.   <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
    3. </div>
    4. <div class="progress">
    5.   <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
    6. </div>
    7. <div class="progress">
    8.   <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
    9. </div>
    10. <div class="progress">
    11.   <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
    12. </div>

    多进度条进度（嵌套）

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

    进度条(Progress) - 图6

    1. <div class="progress">
    2.   <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
    3.   <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
    4.   <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
    5. </div>

    条纹进度指示

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

    进度条(Progress) - 图7

    1. <div class="progress">
    2.   <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
    3. </div>
    4. <div class="progress">
    5.   <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
    6. </div>
    7. <div class="progress">
    8.   <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
    9. </div>
    10. <div class="progress">
    11.   <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
    12. </div>
    13. <div class="progress">
    14.   <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
    15. </div>

    动画条纹进度指示

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

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

    进度条(Progress) - 图8

    1. <div class="progress">
    2.   <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
    3. </div>