Circular Progress

Circular Progress is used to indicates the progress for determinate and indeterminate processes.

SourceTheme Source@chakra-ui/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.
Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by â–² Vercel