Progress 进度
线性 / 圆形进度条，5 种语义色，支持不确定状态与显示百分比。
基础用法
value 是 0..100 的百分比。showLabel 在线性条右侧显示当前百分比文本。
30%
<CfProgress :value="value" show-label /><CfProgress value={value} showLabel />5 种 tone
tone —— primary / success / warning / danger / info，对应 token 里 --accent-* / --status-*。
60%
60%
60%
60%
60%
<CfProgress :value="60" tone="primary" show-label />
<CfProgress :value="60" tone="success" show-label />
<CfProgress :value="60" tone="warning" show-label />
<CfProgress :value="60" tone="danger" show-label />
<CfProgress :value="60" tone="info" show-label /><CfProgress value={60} tone="primary" showLabel />
<CfProgress value={60} tone="success" showLabel />
<CfProgress value={60} tone="warning" showLabel />
<CfProgress value={60} tone="danger" showLabel />
<CfProgress value={60} tone="info" showLabel />圆形 variant
variant="circle" 切换成环形 — 适合卡片、KPI 或仪表盘场景。size 控制直径，strokeWidth 可显式控制环线粗细（默认按 size 推断）。
40%
60%
100%
<CfProgress variant="circle" size="sm" :value="40" show-label />
<CfProgress variant="circle" :value="60" show-label />
<CfProgress variant="circle" size="lg" :value="100" tone="success" show-label />
<CfProgress variant="circle" size="lg" indeterminate /><CfProgress variant="circle" size="sm" value={40} showLabel />
<CfProgress variant="circle" value={60} showLabel />
<CfProgress variant="circle" size="lg" value={100} tone="success" showLabel />
<CfProgress variant="circle" size="lg" indeterminate />不确定状态
indeterminate 时忽略 value，渲染循环动画 — 适合不知道进度的等待场景。
<CfProgress indeterminate />
<CfProgress indeterminate tone="success" />
<CfProgress indeterminate tone="danger" size="sm" /><CfProgress indeterminate />
<CfProgress indeterminate tone="success" />
<CfProgress indeterminate tone="danger" size="sm" />API
| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
value | number（0..100） | 0 | 当前进度 |
variant | 'line' | 'circle' | 'line' | 视觉形态 |
tone | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'primary' | 语义色 |
size | 'sm' | 'md' | 'lg' | 'md' | 高度（line）/ 直径（circle） |
indeterminate | boolean | false | 不确定状态，忽略 value，循环动画 |
showLabel | boolean | false | 在右侧 / 中心显示百分比 |
strokeWidth | number | — | circle 模式下环线宽度（默认按 size） |
反馈与讨论
Progress 进度 的讨论