Components

Progress 进度条

任务进度、百分比与完成数量，带标签行与语义色。

数值显示、色彩与尺寸

可单独显示百分比、完成数量，或同时显示两者。

节点同步进度72%

健康检查8/12

存储用量68% (34/50)

异常实例

<div class="space-y-4 max-w-md">
  <Progress :value="72" label="节点同步进度" value-display="percentage" color="primary" />
  <Progress :value="8" :max="12" label="健康检查" value-display="fraction" color="success" size="sm" />
  <Progress :value="34" :max="50" label="存储用量" value-display="both" color="warning" size="sm" />
  <Progress :value="12" label="异常实例" color="error" size="sm" />
</div>

API 参考

属性	类型	默认值	说明
value / max	number	0 / 100	当前值与上限。
label	string	—	左侧标签。
value-display	'percentage' \| 'fraction' \| 'both'	—	右侧显示百分比、当前值/上限，或两者。
show-value	boolean	false	兼容属性，等同 value-display="percentage"。
color	'primary' \| 'success' \| 'warning' \| 'error' \| 'neutral'	primary	进度条色。
size	'sm' \| 'md' \| 'lg'	md	轨道高度。