Bootstrap5 进度条

https://v5.bootcss.com/docs/components/progress/

进度条可用于向用户显示任务或操作的进度。进度条支持堆叠、动画背景和文本标签。

它是任何工作的

进度组件由两个HTML元素、一些用于设置宽度的CSS样式以及几个属性构成。不采用HTML5中的<progress>元素，确保你可以堆叠进度条，对它们进行动画处理，并在其上放置文本标签。

• 使用.progress作为包装器，以指示进度条的最大值。
• .progress包装器还需要一个role="progress"和一些aria属性来使其可访问，包括一个可访问的名称（使用aria-label, aria-labelledby或类似属性）。
• 使用内部的.progress-bar纯粹用于视觉上的进度条和标签。
• .progress-bar需要内联样式、实用类或自定义css来设置其宽度。
• 提供一个特殊的.progress-stacked类来创建多个/堆叠的进度条。

创建一个简单的进度条

设置进度条的高度

https://v5.bootcss.com/docs/components/progress/#height

进度条的高度默认为1rem（通常为16px），但我们也可以根据需要在.progress元素上设置CSS height属性来设置其高度。

只需在.progress容器上设置一个高度值，因此如果你更改该值，内部的.progress-bar将自动相应地调整大小。

例如：

进度条的标签

https://v5.bootcss.com/docs/components/progress/#labels

通过将文本放置在.progress-bar内，为进度条添加标签。

例如：

进度条背景颜色

https://v5.bootcss.com/docs/components/progress/#backgrounds

使用背景实用类来改变单个进度条的外观。

例如：

条纹的进度条

https://v5.bootcss.com/docs/components/progress/#striped

在任何.progress-bar上添加.progress-bar-striped类，以通过css渐变在进度条的背景颜色上应用条纹效果。

例如：

进度条动画

https://v5.bootcss.com/docs/components/progress/#animated-stripes

条纹渐变也可以动画化。将.progress-bar-animated类添加到.progress-bar上，通过css3动画使条纹从右向左移动。

例如：

混合色彩进度条

可以在带有.progress-stacked的容器内包含多个进度组件，以创建一个堆叠的进度条。
请注意：在这种情况下，设置进度条视觉宽度的样式必须应用于.progress元素，而不是.progress-bar。

例如：