Bootstrap4 进度条

进度条用于提示用户任务的完成过程，Bootstrap 提供了 .progress 和 .progress-bar css 类来创建进度条

基本的进度条

Bootstrap 提供了 .progress 和 .progress-bar CSS 类用于创建进度条

同时可以在 .progress-bar 元素上设置 width 属性用于进度条的完成度

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

进度条高度

Bootstrap 4 默认的进度条高度为 16px

但我们可以在 .progress 元素上设置 height 属性来修改默认的高度

<div class="progress" style="height:44px">
  <div class="progress-bar" style="width:10%"></div>
</div>

进度条标签

可以在 .progress-bar 元素上添加文本，比如进度的百分比

<div class="progress">
  <div class="progress-bar" style="width:90%">9%</div>
</div>

不同颜色的进度条

进度条的默认颜色为蓝色，不过我们可以使用 .bg-* 来改变

<div class="progress">
  <div class="progress-bar bg-success" style="width:40%"></div>
</div>

<div class="progress">
  <div class="progress-bar bg-info" style="width:50%"></div>
</div>

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

<div class="progress">
  <div class="progress-bar bg-danger" style="width:70%"></div>
</div>

条纹的进度条

除了可以使用 .bg-* 来设置进度条的颜色外，还可以使用 .progress-bar-striped类来设置条纹进度条

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

动画进度条

.progress-bar-animated CSS 类可以为进度条添加动画效果

<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 40%"></div>

混合色彩进度条

可以通过叠加 .progress-bar 的方式给一个进度条设置多种颜色

<div class="progress">
  <div class="progress-bar bg-success" style="width:40%">第一段</div>
  <div class="progress-bar bg-warning" style="width:10%">第二段</div>
  <div class="progress-bar bg-danger" style="width:20%">第三段</div>
</div>

链接: https://www.fly63.com/course/19_956