Bootstrap 进度条

进度条（Progress Bar）用一条横向色块直观展示任务的完成比例，比如上传进度、问卷完成度、磁盘用量。Bootstrap 的进度条由外层轨道 .progress 和内层色块 .progress-bar 组成，宽度用内联样式按百分比控制，轨道本身不会消失、便于反复更新数值。

基本进度条

<div class="progress">
  <div class="progress-bar" style="width: 60%;">60%</div>
</div>

效果：灰色轨道内从左向右铺出 60% 宽度的蓝色进度块，块内直接显示"60%"文字；数值小于一定宽度时文字会溢出，可改用 .sr-only 把文字隐藏给屏幕阅读器读取。

情景色与条纹

追加 progress-bar-success 等情景类可换色；追加 .progress-bar-striped 得到斜纹样式，再加上 .active 条纹会流动起来：

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 40%;">40%</div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped active" style="width: 70%;">70%</div>
</div>

效果：第一根是绿色实心进度条；第二根为带斜向条纹的进度条且条纹持续向右流动，给人"任务正在处理中"的动感。

堆叠进度条

在一根轨道里放多根 .progress-bar，可把整体拆成多个部分展示：

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%;">35%</div>
  <div class="progress-bar progress-bar-warning" style="width: 20%;">20%</div>
  <div class="progress-bar progress-bar-danger" style="width: 15%;">15%</div>
</div>

效果：同一轨道内显示绿、黄、红三段色块，分别表示"已完成、处理中、失败"的占比；注意各段宽度之和不应超过 100%，否则会溢出轨道。

小结：进度条结构固定为 .progress 包裹 .progress-bar，宽度即进度；配合情景色、条纹与动画可表达状态与动感，堆叠多段则可展示构成比例。