组件

Progress 进度条

进度条；用内联 style="width:%" 控制进度。

默认

45%

<div class="pvs-progress">
  <span class="pvs-progress__bar" style="width:45%">
  </span>
</div>
<p class="pvs-text-sm pvs-text-muted pvs-mt-2 pvs-m-0">45%</p>

语义与尺寸

<div class="pvs-stack">
  <div class="pvs-progress pvs-progress--sm">
    <span class="pvs-progress__bar" style="width:30%">
    </span>
  </div>
  <div class="pvs-progress pvs-progress--success">
    <span class="pvs-progress__bar" style="width:70%">
    </span>
  </div>
  <div class="pvs-progress pvs-progress--warning pvs-progress--lg">
    <span class="pvs-progress__bar" style="width:50%">
    </span>
  </div>
  <div class="pvs-progress pvs-progress--danger">
    <span class="pvs-progress__bar" style="width:90%">
    </span>
  </div>
</div>

Striped & animated

pvs-progress--striped 条纹；叠加 --animated 流动动画。

<div class="pvs-stack">
  <div class="pvs-progress pvs-progress--striped">
    <span class="pvs-progress__bar" style="width:55%">
    </span>
  </div>
  <div class="pvs-progress pvs-progress--striped pvs-progress--animated pvs-progress--success">
    <span class="pvs-progress__bar" style="width:70%">
    </span>
  </div>
</div>

类名速查

类名	说明
`pvs-progress`	轨道
`pvs-progress__bar`	填充条（设 width）
`pvs-progress--sm / --lg`	高度
`pvs-progress--success / --warning / --danger`	语义色
`pvs-progress--striped / --animated`	条纹 / 动画