Progress
Linear / circular progress bar with 5 semantic tones, indeterminate state, and percentage display.
Basic usage
value is a percentage in the range 0..100. showLabel renders the current percentage to the right of the linear bar.
30%
<CfProgress :value="value" show-label /><CfProgress value={value} showLabel />Five tones
tone — primary / success / warning / danger / info, mapped to --accent-* / --status-* tokens.
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 />Circle variant
variant="circle" switches to a ring — well suited to cards, KPIs, and gauges. size controls the diameter; strokeWidth explicitly sets the ring thickness (default is inferred from 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
When indeterminate is set, value is ignored and a looping animation is rendered — for waiting states with unknown progress.
<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 | Type | Default | Description |
|---|---|---|---|
value | number (0..100) | 0 | Current progress |
variant | 'line' | 'circle' | 'line' | Visual form |
tone | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'primary' | Semantic color |
size | 'sm' | 'md' | 'lg' | 'md' | Height (line) / diameter (circle) |
indeterminate | boolean | false | Indeterminate state; ignores value, loops animation |
showLabel | boolean | false | Show percentage on the right / center |
strokeWidth | number | — | Ring thickness in circle mode (defaults from size) |
反馈与讨论
Progress · Discussion