什么是Bootstrap5进度条？¶
进度条是网页中展示任务完成度的常用组件，Bootstrap5的进度条组件不仅内置了基础样式，还支持响应式布局、颜色定制、动画效果等，能快速满足各种进度展示需求，无需从零编写CSS。
一、基础用法：最简单的进度条¶
Bootstrap5进度条的核心结构由两个嵌套的div组成：外层是 .progress 容器，内层是 .progress-bar （进度条主体）。只需设置 .progress-bar 的宽度，即可显示进度。
示例代码：
<div class="progress">
<div class="progress-bar" style="width: 60%"></div>
</div>
解释：
- .progress：外层容器，默认设置了背景色和固定高度，确保进度条整体外观统一。
- .progress-bar：内层进度条，必须通过 width 属性或工具类设置进度比例（如 60% 表示完成60%）。
二、颜色定制：给进度条换“皮肤”¶
Bootstrap5提供了丰富的背景色类，可直接给 .progress-bar 添加类名（如 bg-primary、bg-success 等）快速改变进度条颜色。
示例代码：
<!-- 成功色进度条 -->
<div class="progress">
<div class="progress-bar bg-success" style="width: 30%"></div>
</div>
<!-- 警告色进度条 -->
<div class="progress">
<div class="progress-bar bg-warning" style="width: 75%"></div>
</div>
常用颜色类：
- bg-primary（主色）、bg-success（成功）、bg-info（信息）、bg-danger（危险）、bg-warning（警告）等。
- 也可通过 style="background-color: 自定义颜色;" 自定义颜色（如 style="background-color: #ff6347;"）。
三、调整高度：控制进度条显高/显矮¶
进度条的高度可通过工具类或直接设置 height 样式调整，默认高度较小（约0.5rem），适合紧凑布局；若需更粗的进度条，可自定义高度。
示例代码：
<!-- 使用Bootstrap高度工具类（h-2=0.5rem，h-3=0.75rem等） -->
<div class="progress h-2">
<div class="progress-bar bg-primary" style="width: 50%"></div>
</div>
<!-- 直接设置高度（如20px） -->
<div class="progress" style="height: 20px;">
<div class="progress-bar bg-info" style="width: 80%"></div>
</div>
四、条纹效果：增加视觉层次感¶
通过 .progress-bar-striped 类可给进度条添加横向条纹，配合 .bg-gradient 还能实现渐变条纹，让进度更直观。
示例代码：
<!-- 基础条纹效果 -->
<div class="progress">
<div class="progress-bar progress-bar-striped" style="width: 40%"></div>
</div>
<!-- 渐变条纹效果 -->
<div class="progress">
<div class="progress-bar progress-bar-striped bg-gradient" style="width: 65%"></div>
</div>
五、动态动画：进度条“动起来”¶
若需进度条自动加载（如模拟文件下载），可通过 .progress-bar-animated 类实现静态动画，或结合JS动态更新进度。
静态动画（无需JS）：
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" style="width: 0%"></div>
</div>
解释：.progress-bar-animated 会让条纹背景从左向右“流动”，模拟进度加载过程。
动态进度（需JS）：
若需点击按钮后更新进度，可通过JS修改 .progress-bar 的 width 值。例如：
<div class="progress">
<div class="progress-bar" id="myProgress" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div>
</div>
<button onclick="updateProgress()">加载进度</button>
<script>
function updateProgress() {
const bar = document.getElementById('myProgress');
let width = 0;
const interval = setInterval(() => {
width += 1;
bar.style.width = `${width}%`;
bar.setAttribute('aria-valuenow', width);
if (width >= 100) clearInterval(interval);
}, 30);
}
</script>
六、堆叠进度条：多任务进度同时展示¶
若需同时展示多个任务的进度（如“已完成50%+未完成30%”），可将多个 .progress-bar 放入同一个 .progress 容器内，实现水平堆叠效果。
示例代码：
<div class="progress">
<div class="progress-bar bg-primary" style="width: 50%"></div>
<div class="progress-bar bg-success" style="width: 30%"></div>
<div class="progress-bar bg-warning" style="width: 20%"></div>
</div>
七、可访问性优化：让进度条更友好¶
为了屏幕阅读器能识别进度条数值，需添加 aria-valuenow（当前进度值）、aria-valuemin（最小值）、aria-valuemax（最大值）属性：
示例代码：
<div class="progress">
<div class="progress-bar bg-info"
style="width: 70%"
role="progressbar"
aria-valuenow="70"
aria-valuemin="0"
aria-valuemax="100">
70% 完成
</div>
</div>
总结¶
Bootstrap5进度条通过简单的类名和工具类即可实现多种效果，核心要点如下：
- 基础结构：.progress（容器）+ .progress-bar（进度条）。
- 颜色定制：直接添加 bg-* 类。
- 样式扩展：高度（h-* 工具类）、条纹（progress-bar-striped）、动画（progress-bar-animated）。
- 动态进度：配合JS修改 width 或使用动画类。
通过以上方法，即可快速在网页中实现直观、美观的进度展示效果，提升用户体验。