RadialProgress is a circular progress indicator that visually represents completion percentage in a radial format.
It supports customizable size, thickness, colors, and can include content in its center.
The simplest way to use the radial progress indicator is to set the value prop. You can also place content in the center using the default slot.
RadialProgress is a standalone component.
The RadialProgress component displays a circular progress indicator that visually represents completion percentage in a radial format.
| RadialProgress Props | Type | Description |
|---|---|---|
value | number | string | The current value of the progress indicator (0-100). |
size | string | The size of the radial progress indicator. Default is |
thickness | string | The thickness of the progress track. Default is |
color | string | Sets the color of the progress indicator. 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. |
| info | boolean | Sets the color to info. |
| success | boolean | Sets the color to success. |
| warning | boolean | Sets the color to warning. |
| error | boolean | Sets the color to error. |
| RadialProgress Slots | Description |
|---|---|
default | The default slot. Content placed here will appear in the center of the radial progress indicator. |
Showcases all color options for the radial progress indicator using shortcut boolean props.
Customize the size of the radial progress indicator with the size prop.
Adjust the thickness of the progress track with the thickness prop.
Apply custom classes for advanced styling (e.g., border, background).
Show a radial progress indicator that counts down from 100 to 0, updating every second.