Progress is a simple component that displays a progress bar to visualize the completion status of a task or process.
It supports various colors and can be customized with value and max attributes.
The simplest way to use the progress bar is to set the value prop.
Progress is a standalone component.
The Progress component displays a progress bar to visualize the completion status of a task or process.
| Progress Props | Type | Description |
|---|---|---|
value | number | The current value of the progress bar. Default is |
max | number | The maximum value of the progress bar. Default is |
color | string | Sets the color of the progress bar. Options: - |
| neutral | boolean | Sets the color to neutral. |
| primary | boolean | Sets the color to primary. |
| secondary | boolean | Sets the color to secondary. |
| accent | boolean | Sets the color to accent. |
| success | boolean | Sets the color to success. |
| info | boolean | Sets the color to info. |
| warning | boolean | Sets the color to warning. |
| error | boolean | Sets the color to error. |
Showcases all color options for the progress bar using shortcut boolean props.
Customize the height and border radius using Tailwind classes.