Progress
Determinate progress for uploads, tasks, and compact dashboards. In Chinese this component is 進度條.
The default fill is brand gold, the same language as a primary Button. Success, warning, and error use the semantic colors. Info blue is not the default.
Demos
Line
type defaults to line. The track is neutral; the fill is brand. Status
success, warning, and error recolor the fill. Reaching 100% does not change status by itself. Indicator
show-indicator defaults to true and renders the percentage. Set show-indicator="false" to hide it. Inside label
indicator-placement="inside" is for lines. The track grows to 18px. At 60% and above the label sits on the fill. Circle
Circle diameters are 64 / 96 / 120. The
indicator slot replaces the center label. Sizes
Line thickness is 6 / 8 / 10.
height overrides it. Circle stroke defaults to 5 / 6 / 7 unless stroke-width is set. Processing
processing adds a shimmer on the fill. prefers-reduced-motion turns the shimmer and the width transition off. Indeterminate progress is not in v1. API
Props
| Prop | Type | Default |
|---|---|---|
type | 'line' | 'circle' | 'line' |
percentage | number | 0 |
status | 'default' | 'success' | 'error' | 'warning' | 'default' |
show-indicator | boolean | true |
indicator-placement | 'outside' | 'inside' | 'outside' |
height | number | 0 (use the size preset) |
stroke-width | number | 0 (use the size preset) |
processing | boolean | false |
size | 'sm' | 'md' | 'lg' | 'md' |
label | string | '' |
percentage is clamped to 0–100. A non-finite value becomes 0. There is no event in v1; bind percentage from the app.
Slots
| Name | Description |
|---|---|
indicator | Replaces the percentage label |
CSS parts
root, track, fill, indicator, circle, trail, path.
Accessibility
- The host is
role="progressbar"witharia-valuemin="0",aria-valuemax="100", andaria-valuenow. labelis copied toaria-label. An existingaria-labelon the host is kept whenlabelis empty.