Progress
Shows task progress, supporting line and circle forms, status colors, and hidden text.
Basic usage
Basic usage
Status
Status
Hidden text
Hidden text
Circle progress
Circle
The circle defaults to a 48px diameter and 6px stroke, showing the percentage in the center; type="circle" switches the form.
Circle size & stroke width
Size / stroke width
Circle status
Circle status colors
status="success|error" recolors the whole ring (success green, error red); show-text="false" hides the center percentage.
Dynamic progress
Dynamic progress
API
Attributes
| Attribute | Description | Type | Default |
|---|---|---|---|
no-text | Hide the side/center percentage text | boolean | — |
percent | Progress percentage (0–100, clamped automatically) | string | 0 |
show-text | Whether to show the percentage text | string | true |
size | Circle diameter (px) | string | 48 |
status | Status color; error red, success green; when unset and progress reaches 100, success green is shown | string | — |
stroke-width | Circle stroke width (px) | string | 6 |
type | Form: line / circle | string | line |
role="progressbar" + aria-valuenow / aria-valuemin / aria-valuemax (synced for both line and circle).