Progress 进度条

展示操作或任务的当前进度，支持线形、环形、仪表盘三种类型，以及状态、条纹动画等丰富配置。

基础用法

通过 percent 设置进度百分比，默认为线形进度条。

30%

60%

100%

不同状态

通过 status 设置进度条状态：default / success / warning / error。

70%

100%

50%

30%

自定义高度

通过 height 设置进度条高度（px），配合 textInside 可将文字显示在进度条内部。

50%

65%

自定义颜色

通过 color 覆盖默认颜色，优先级高于 status。

40%

70%

90%

条纹与动画

设置 stripe 显示条纹背景，设置 animated 开启滚动动画效果。

50%

70%

80%

隐藏与格式化文字

设置 show-text 为 false 隐藏百分比文字；通过 format 自定义文字内容。

80 / 100

完成 ✓

环形进度条

设置 type 为 circle，可配置 size 和 stroke-width。

30%

75%

100%

50%

仪表盘

设置 type 为 dashboard，呈现 270° 扇区仪表盘样式。

30%

75%

100%

动态进度

结合响应式变量实现动态进度演示。

40%

参数	类型	默认值	说明
`percent`	`number`	`—`	百分比（必填，范围 0-100）
`type`	`'line' \| 'circle' \| 'dashboard'`	`'line'`	进度条类型
`height`	`number`	`8`	线形进度条高度(px)
`color`	`string`	`—`	自定义颜色，优先级高于 status
`showText`	`boolean`	`true`	是否显示百分比文字
`textInside`	`boolean`	`false`	线形进度条文字是否内显（需较大 height）
`status`	`'default' \| 'success' \| 'warning' \| 'error'`	`'default'`	状态
`stripe`	`boolean`	`false`	是否显示条纹背景
`animated`	`boolean`	`false`	条纹是否开启滚动动画（需 stripe 为 true）
`strokeWidth`	`number`	`6`	环形/仪表盘进度条宽度
`size`	`number`	`120`	环形/仪表盘尺寸(px)
`format`	`(percent: number) => string`	`—`	自定义文字格式化函数

插槽名	说明
`default`	暂无，可通过 format 自定义文字