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.
Border
Use borderWidth (px) to set the thickness of the frame around Progress, and borderColor to set its color. When borderColor is omitted the frame follows the theme's neutral color, borderWidth defaults to the global pixel size, and borderWidth: 0 removes the frame.
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 |
| trackColor | string | True | | The background color of the progress bar track. | 0.1.0 |
| borderWidth | number | True | | The width of the frame around Progress. | 0.2.1 |
| borderColor | string | True | | The color of the frame around Progress. | 0.2.1 |
| 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 |