Progress 进度条

展示操作或任务的当前进度。

基本用法

通过 percent 控制进度百分比。

25%

50%

75%

100%

<AProgress :percent="25" />
<AProgress :percent="50" />
<AProgress :percent="75" />
<AProgress :percent="100" />

尺寸

支持 sm、md、lg 三种尺寸。

60%

60%

60%

<AProgress :percent="60" size="sm" />
<AProgress :percent="60" size="md" />
<AProgress :percent="60" size="lg" />

状态

active 状态会显示流动光效，exception 显示红色，达到 100% 时自动变为成功态。

60%

60%

100%

<AProgress :percent="60" status="active" />
<AProgress :percent="60" status="exception" />
<AProgress :percent="100" />

自定义颜色

通过 strokeColor 和 trailColor 自定义轨道与填充色。

70%

40%

<AProgress :percent="70" strokeColor="#a78bfa" />
<AProgress :percent="40" strokeColor="#f97316" trailColor="#fff7ed" />

隐藏百分比

设置 show-info="false" 隐藏百分比文字。

<AProgress :percent="80" :show-info="false" />

API

Props

名称	类型	默认值	说明
percent	number	0	百分比，范围 0–100
strokeColor	string	—	填充色，默认使用强调色
trailColor	string	—	轨道色
size	'sm' | 'md' | 'lg'	'md'	尺寸
showInfo	boolean	true	是否显示百分比文字
status	'active' | 'exception' | 'success'	'active'	状态

交互特性

• 宽度变化使用 smooth 缓动曲线
• 100% 时自动切换为成功色
• active 状态显示流动光效
• 完整 ARIA progressbar 语义
• 尊重系统 prefers-reduced-motion 设置