Progress 进度条

基于 BrConfigProvider 实现全局主题配置，支持线性/环形两种进度展示模式，用于展示操作的当前进度。

基础用法

线性进度条 (Linear)

默认的进度条样式，支持不同的尺寸。

Example

环形进度条 (Radial)

将 variant 设置为 radial 以使用环形进度条。

Example

进度标签 (Labels)

可以通过 showLabel 属性显示进度标签，支持自定义格式和位置。

75%

75%

75 / 100

75%

Example

不确定状态 (Indeterminate)

当不确定具体进度时，可以使用 indeterminate 属性显示加载动画。

Example

主题定制

BrProgress 完全集成了 BrConfigProvider，允许你通过全局配置或局部类名定制样式。

全局定制 (BrConfigProvider)

你可以通过 BrConfigProvider 的 theme 和 size 属性覆盖默认 CSS 变量，以自定义颜色、动画速度等。

Example

颜色定制 (Colors)

你可以使用 TailwindCSS 工具类、或组件自带的 color 和 trackColor 属性覆盖样式。

Example

API

BrProgress / BrProgressLinear / BrProgressRadial

这三个组件共享相同的属性和事件。BrProgress 是一个包装器，根据 variant 属性渲染对应的子组件。

Props

属性名	类型	默认值	说明
modelValue	number | null	0	进度条的当前值 (0 - max)
max	number	100	进度条的最大值
variant	'linear' | 'radial'	'linear'	进度条的视觉变体
size	'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'default'	'default'	进度条的尺寸
color	string	-	自定义进度指示器的颜色
trackColor	string	-	自定义进度条轨道的颜色
thickness	number | string	-	自定义厚度（线性为高度，环形为描边宽度）
showLabel	boolean | string	false	是否显示进度标签（支持 'inner' / 'outer'）
labelFormat	(value: number, max: number) => string	-	自定义标签格式化函数
disabled	boolean	false	是否禁用
indeterminate	boolean	false	是否处于不确定状态（加载动画）
animationDuration	string | number	-	动画持续时间（覆盖主题配置）

Emits

事件名	说明	参数
update:modelValue	更新绑定值	(value: number | null)

Slots

插槽名	说明
label	自定义进度标签内容，参数为 { value, max, percentage }
title	自定义外部标签左侧的标题内容（仅限线性进度条的 outer 模式）