Bootstrap5 进度条

Bootstrap 5 进度条完全指南

什么是进度条？

进度条是用户界面中用来直观展示任务进度的组件，比如：

文件上传/下载进度
表单填写进度
系统处理状态
技能熟练度展示

为什么使用Bootstrap进度条？

Bootstrap让创建专业美观的进度条变得非常简单，无需编写复杂的CSS，只需添加预定义的类即可实现各种效果。

基础进度条

45%

条纹进度条

动画进度条

进度条核心知识点

1. 基础结构

每个进度条由两层嵌套的div构成：

外层容器 (.progress): 定义进度条的整体样式和高度
内层进度 (.progress-bar): 显示实际进度，宽度表示完成百分比

<div class=”progress”>

  <div class=”progress-bar” role=”progressbar” style=”width: 50%;”></div>

</div>

2. 设置进度值

通过 style=”width: X%” 设置进度百分比

30%进度：

75%进度：

3. 进度条颜色

Bootstrap提供了多种预定义颜色，只需添加对应的背景类：

.bg-primary – 蓝色（主要）
.bg-success – 绿色（成功）
.bg-info – 浅蓝色（信息）
.bg-warning – 橙色（警告）
.bg-danger – 红色（危险）

4. 进度条高度

默认高度是16px，可以通过CSS或直接在.progress元素上设置height属性来调整：

纤细进度条 (5px):

中等进度条 (20px):

粗壮进度条 (30px):

80%

5. 进度条标签

在.progress-bar中添加文本，展示进度百分比或说明

25%

已完成一半

重要步骤 (75%)

6. 条纹效果

添加 .progress-bar-striped 类创建条纹进度条

75%

7. 动画条纹

添加 .progress-bar-animated 类实现流动动画效果

注意：动画效果需要基于条纹进度条，所以必须同时包含 .progress-bar-striped 类

8. 多进度条组合

在单个.progress容器中放置多个.progress-bar，创建分段进度条

第一步

第二步

第三步

这种组合适合展示多阶段任务的完成情况

实战应用示例

用户注册进度

基本信息 (25%)

联系方式 (25%)

偏好设置 (25%)

完成注册 (0%)

此示例展示了多步骤表单的进度情况

系统加载状态

正在加载系统资源，请稍候…

技能展示

HTML / CSS

90%

JavaScript

75%

Bootstrap

85%

React

学习中

最佳实践与注意事项

进度条使用原则

确保进度条有明确的最小值和最大值（通常0-100）
为屏幕阅读器用户添加适当的ARIA属性
在长时间操作中提供进度反馈
使用颜色传达状态（绿色=成功，黄色=警告等）

常见错误

忘记设置宽度导致进度条显示为0%
在进度条中使用过多颜色造成混乱
进度百分比总计超过100%
在不适合的场景使用动画（分散注意力）

自定义技巧

使用CSS渐变创建独特效果
添加阴影提升层次感
结合图标增强视觉表现
调整条纹大小和角度

自定义渐变与条纹效果