进度条

使用方法

使用 CSS 类 .progress 和 .progress-bar 来创建进度条，通过为 .progress-bar 设置 CSS width 来展示进度。

颜色主题

给 .progress-bar 元素添加 .* 等颜色CSS工具类，得到各种颜色的进度条。

圆角大小

给 .progress 元素添加 .rounded-* CSS工具类，给进度条添加不同大小的圆角。

特殊效果

条纹效果

给 .progress 元素添加 .progress-striped 工具类，给进度条添加条纹效果。

动画效果

给使用了 progress-striped 工具类的元素添加 .active 工具类,给条纹进度条添加向左滑动的动画。

堆叠效果

给 .progress 元素添加多个 progress-bar 元素，使多个进度条堆叠展示。

CSS 类

进度条提供了如下 CSS 类：

类	类型	作用
progress	实体类	元素作为进度条容器组件
progress-bar	实体类	元素作为进度条组件
progress-striped	工具类	为进度条组件启用条纹样式
active	工具类	为条纹样式进度条组件启用动画效果

CSS 变量

变量名称	变量含义
--progress-bg	进度条组件背景颜色
--progress-bar-color	进度条组件颜色
--progress-radius	进度条组件圆角大小
--progress-striped-size	进度条组件条纹大小