Circular Progress

Import#

import { CircularProgress, CircularProgressLabel } from '@chakra-ui/react'

Usage#

There are two types of progress indicators: determinate and indeterminate.

• Determinate progress: fills the circular track with color, as the indicator moves from 0 to 360 degrees.
• Indeterminate progress: grows and shrinks the indicator while moving along the circular track.

<CircularProgress value={80} />

Changing the size#

You can add size prop to the progress bar to add a custom size.

// Change the size to 120px
<CircularProgress value={30} size='120px' />

Changing the thickness#

You can add the thickness prop to update the thickness of the progress ring.

This defines the stroke width of the svg circle.

<CircularProgress value={59} size='100px' thickness='4px' />

Changing the color#

You can add color prop to any progress bar to apply any color that exists in the theme.

<CircularProgress value={30} color='orange.400' thickness='12px' />

Adding label#

Chakra exports a CircularProgressLabel to help you add a label. Pass this component as children prop and you'll be able to render the value.

<CircularProgress value={40} color='green.400'>
  <CircularProgressLabel>40%</CircularProgressLabel>
</CircularProgress>

Indeterminate Progress#

Setting the progress to indeterminate means you're not able to determine the value upfront. Pass the isIndeterminate prop to activate this state.

<CircularProgress isIndeterminate color='green.300' />

Accessibility#

• Progress has role set to progressbar to denote that it is a progress bar.
• Progress has aria-valuenow set to the percentage completion value passed to the component, to ensure the progress percent is visible to screen readers.

Props#