Radial Progress

RadialProgress displays a circular progress meter. The default slot centers text inside of the circle.

10%

40%

70%

100%

Code Example

<RadialProgress value="10">
  10%
</RadialProgress>

Components

RadialProgress is a standalone component.

Progress can be customized with the following props:

Prop	Type	Description
`value`	number	sets the progress amount `default: 0`
`size`	string	a CSS size value `default: 4rem`
`thickness`	string	a CSS size value `default: calc(var(--size) / 10)`
`color`	string	Sets the button color to one of the below prop names.
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.

There are two ways of specifying color:

The primary, secondary, neutral, accent, info, success, warning, and error boolean props.
The color prop, which accepts a string with any of the above prop names.

Code Example

<RadialProgress primary value="40" />

The size prop accepts any CSS size string. The default size is 4rem

Code Example

<RadialProgress primary value="40" size="8rem" />

The thickness prop accepts any CSS size string. The default thickness is calc(var(--size) / 10)

Code Example

<RadialProgress primary value="40" thickness="calc(var(--size) / 4)" />

Use utility classes to add borders, backrounds, etc.

Code Example

<RadialProgress value="60" class="border-4 bg-primary border-primary" />