Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsEnterpriseBlogShowcase
Sponsor

Progress Circle

Used to display a task's progress in a circular form.

SourceStorybookRecipeArk

Setup

If you don't already have the snippet, run the following command to add the progress-circle snippet

chakra snippet add progress-circle

The snippet includes a closed component composition for the ProgressCircle component.

Usage

import {
  ProgressCircleRing,
  ProgressCircleRoot,
} from "@/components/ui/progress-circle"
<ProgressCircleRoot>
  <ProgressCircleRing />
  <ProgressCircleValueText />
</ProgressCircleRoot>

Examples

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.

gray

red

green

blue

teal

pink

purple

cyan

orange

yellow

Value Text

Render the ProgressCircleValueText component to display the progress value.

5%
5%
5%

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.

Props

Root

PropDefaultType
colorPalette 'gray'
'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink' | 'accent'

The color palette of the component

size 'md'
'xs' | 'sm' | 'md' | 'lg'

The size of the component

Previous

Popover

Next

Progress