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
Props
| Prop | Default | Type / Description |
value | - | number The current value of the progress bar. |
max | 100 | number The maximum value of the progress bar. |
Returned Props
| Returned Prop | Type | Description |
value | Writable<number | null> | A writable store that controls the current value of the progress bar. |
max | Writable<number> | A writable store that controls the maximum value of the progress bar. |
root | - | The builder store used to create the progress bar root. |
root
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