Progress Circle

Usage

import { ProgressCircle } from "@chakra-ui/react"

<ProgressCircle.Root>
  <ProgressCircle.Circle>
    <ProgressCircle.Track />
    <ProgressCircle.Range />
  </ProgressCircle.Circle>
  <ProgressCircle.ValueText />
</ProgressCircle.Root>

Examples

Rounded

Use the strokeLinecap prop on ProgressCircle.Range to make the ends of the progress circle rounded.

Sizes

Use the size prop to change the size of the progress circle component.

Colors

Use the colorPalette prop to change the color scheme of the component.

Value Text

Render the ProgressCircle.ValueText component to display the progress value.

Custom Thickness

Pass the --thickness css variable to the ProgressCircleRing component to change the thickness of the ring.

Indeterminate

Set the value prop to null to render the indeterminate state.

Color

Pass the stroke prop to the ProgressCircle.Range component to change the color of the range.

Closed Component

Here's how to create a closed component using the ProgressCircle component.

Guide

Customizing indeterminate color

Use the _indeterminate condition to style the indeterminate state.

<ProgressCircle.Range _indeterminate={{ stroke: "purple.500" }} />

Props

Root