Bootstrap进度条需手动添加CSS过渡实现动画，基础结构为progress容器嵌套progress-bar，通过style="width"控制比例，支持多色分段和百分比文字叠加。
Bootstrap 的 progress 组件本身不带动画特效，但通过 HTML 结构 + Bootstrap 类 + 少量 CSS 或 JavaScript，就能轻松实现动态加载、颜色变化、百分比显示等常见进度条效果。
基础结构：用 Bootstrap 类快速搭建
Bootstrap 5+ 的进度条基于语义化 HTML，核心是 <div class="progress"> 容器和内部的 <div class="progress-bar">。宽度用 style="width: XX%" 控制，表示当前完成比例。
示例代码：
<div class="progress"> <div class="progress-bar" role="progressbar" style="width: 45%" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"></div> </div>
注意：role、aria-* 属性提升可访问性，建议保留。
立即学习“前端免费学习笔记（深入）”；
添加动态效果：CSS 过渡让进度平滑变化
默认宽度变化是瞬间跳变。加一句 CSS 就能让它“滑动”起来：
在 <style> 或自定义 CSS 文件中写：
.progress-bar {
transition: width 0.4s ease;
}
之后只要 JS 修改 style.width（比如从 20% 改为 75%），浏览器就会自动补间动画。
多色与分段：用不同 class 或嵌套实现
Bootstrap 内置颜色类（如 bg-success、bg-warning）可直接加在 progress-bar 上：
<div class="progress-bar bg-info" style="width: 60%"></div>
若要一段红、一段绿的“多段进度条”，可在一个 progress 容器里放多个 progress-bar，各自设宽度和颜色：
<div class="progress"> <div class="progress-bar bg-danger" style="width: 30%"></div> <div class="progress-bar bg-warning" style="width: 20%"></div> <div class="progress-bar bg-success" style="width: 50%"></div> </div>
显示百分比文字：用 flex 布局居中叠加
Bootstrap 默认不显示数字，但可以借助 position: relative 和子元素绝对定位实现：
<div class="progress position-relative"> <div class="progress-bar" style="width: 72%"></div> <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center text-dark fw-bold">72%</div> </div>
关键点：position-relative 给外层，内部文字用 position-absolute 居中；也可用 text-white 配深色背景，或加 text-shadow 提升可读性。
不复杂但容易忽略：过渡动画依赖 width 变化，JS 更新时别忘了触发重绘（一般直接改 style 就行）；多段条需总宽度 ≤100%，否则会溢出容器。
