Progress
This component represents task completion progress visually, though it is not indicative of real-world progress.
Progress Themes
The progress offers various themes: 'primary' (default), 'success', 'warning', 'danger', 'sakura' and 'notice'.
Progress Variants
There are two visual variants: 'solid' (default) and 'checkered'.
Indicator
Use the indicator slot to render a custom indicator (for example a label showing percentage). The component will position it automatically; indicatorPlacement prop controls whether it sits 'inside' or 'outside' the bar.
Sizes
Control height with the size prop. Accepts 'small', 'medium' (default), 'large' or a number (px).
Prepend / Append Slots
You can provide prepend and append slots to add content before or after the progress bar (e.g. labels or icons).
Custom Color
Set a custom color string (CSS-like rgb/rgba or hex 3/4/6/8) to generate a palette used by the bar. trackBackgroundColor can override the track background.
API
ProgressProps
| Attribute | Type | Optional | Default | Description | Version |
|---|---|---|---|---|---|
| percentage | number | True | 0 | Numeric value indicating completion progress (0-100). | 0.1.0 |
| variant | 'solid' | 'checkered' | True | 'solid' | The style variant of the progress bar. | 0.1.0 |
| theme | 'primary' | 'sakura' | 'success' | 'warning' | 'danger' | 'notice' | True | 'primary' | The theme of the progress bar. | 0.1.0 |
| size | 'medium' | 'large' | 'small' | True | 'medium' | The size of the progress bar, measured in px when a number is input. | 0.1.0 |
| gap | number | True | 2 | Gap spacing (px) inside the border. | 0.1.0 |
| indicatorPlacement | 'inside' | 'outside' | True | 'inside' | The position of the indicator content, located inside or outside the filled portion of the progress bar. | 0.1.0 |
| color | string | True | | Custom primary color. See Supported Color Parsing. | 0.1.0 |
| color | string | True | | Custom primary color. See Supported Color Parsing. | 0.1.0 |
| pollSizeChange | boolean | True | false | Enables polling for component size changes, which may affect performance. | 0.1.0 |
ProgressSlots
| Slot | Parameter | Description | Version |
|---|---|---|---|
| append | percentage: number | Slot for content placed after the progress bar. | 0.1.0 |
| prepend | percentage: number | Slot for content placed before the progress bar. | 0.1.0 |
| indicator | percentage: number | Slot for indicator content inside the progress bar. | 0.1.0 |