Progress
Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
Features
- Provides context for assistive technology to read the progress of a task.
Install
Import
API
Root
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | div |
asChild | boolean | false |
getValueLabel | ((value: number, max: number) => string) | `(value: number, max: number) => string` |
max | number | 100 |
modelValue | number | - |
| Event | Type |
|---|---|
update:max | [_value: number] |
update:modelValue | [_value: string[]] |
| Data attribute | Value |
|---|---|
[data-state] | 'complete' | 'indeterminate' | 'loading' |
[data-value] | The current value |
[data-max] | The max value |
Indicator
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | div |
asChild | boolean | false |
| Data attribute | Value |
|---|---|
[data-state] | 'complete' | 'indeterminate' | 'loading' |
[data-value] | The current value |
[data-max] | The max value |