基础进度条

先搞定最基础的用法。步骤很简单：

• 创建一个具备 .progress 类的
  容器作为外壳。
• 在容器内部，再放一个空的
  ，加上 class="progress-bar"，作为进度条的填充部分。
• 通过 style 属性直接设置宽度，比如 style="width: 70%;"，进度条就会填充到70%。

示例代码

自定义进度条高度

Bootstrap4的进度条默认高度是16px，大多数场景下够用。如果你的设计稿需要更高或更矮的进度条，直接用CSS的 height 属性就能灵活调整，没什么门槛。

示例代码

带数值标签的进度条

很多时候，光看进度条的颜色和长度还不够直观。

用户希望直接看到当前完成的百分比数字。办法很简单：在进度条内部直接写上数字即可，比如将百分比数值作为文本节点嵌入。

示例代码

多色风格进度条

Bootstrap4内置了多种预设色彩类。除了默认的蓝色，你还可以使用 bg-success、bg-warning、bg-danger 等快速切换进度条的主题色，满足不同状态下的视觉需求。

示例代码

条纹纹理进度条

如果觉得纯色进度条太单调，可以给它加上斜向条纹背景。

只需要在进度条元素上增加 .progress-bar-striped 类，条纹效果就出来了，视觉上更有质感。

示例代码

动态加载动画进度条

在条纹的基础上，再配合 .progress-bar-animated 类，条纹就会像加载动画一样流畅滚动起来。

特别适合用在需要体现“正在处理”的场景中。

示例代码

多样化配色方案

除了前面提到的预设颜色，进度条还支持更丰富的颜色组合。你可以根据自己的UI设计进行灵活搭配，让进度条不再千篇一律。

示例代码

《夸克》非常好用的免费AI浏览器

下载APP查看