Progress
Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
Features
- Assistive reading technology support for progress bar
Anatomy
- Progress: The progress component.
Usage
To create a progress bar component, use the createProgress builder function. Follow the anatomy or
the example above to create your progress bar.
API Reference
createProgress
The builder function used to create the progress component.
Props
| Prop | Default | Type / Description |
max | 100 | number The maximum value of the progress bar. |
defaultValue | 0 | number The default value of the progress bar. |
value | - | Writable<number> A writable store that controls the current value of the progress bar. |
onValueChange | - | ChangeFn<number> A callback that is called when the value of the progress bar changes. See Change Functions |
Elements
| Element | Description |
The builder store used to create the progress bar. |
States
| State | Description |
value | A writable store with the current value of the progress bar. |
Options
| Option | Description |
max | The maximum value of the progress bar. |
root
The root progress component.
Data Attributes
| Data Attribute | Value |
[data-value] | The current value of the progress bar. |
[data-state] |
|
[data-max] | The maximum value of the progress bar. |
[data-melt-progress] | Present on all root elements. |
On This Page