Circular Progress

The CircularProgress component is used to indicate the progress for determinate and indeterminate processes.

  • 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.

Import#

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

Usage#

Editable Example

Changing the size#

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

Editable Example

Changing the thickness#

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

The thickness has to be a ratio of the size. Value should be between 0 and 1.

Editable Example

Changing the color#

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

Editable Example

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.

40%
Editable Example

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.

Editable Example

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#

NameTypeDescriptionDefault
capIsRoundbooleanIf `true`, the cap of the progress indicator will be rounded.-
getValueText((value: number, percent: number) => string)A function that returns the desired valueText to use in place of the value-
isIndeterminatebooleanIf `true`, the progress will be indeterminate and the `value` prop will be ignored-
maxnumberMaximum value defining 100% progress made (must be higher than 'min')-
minnumberMinimum value defining 'no progress' (must be lower than 'max')-
sizestring | numberThe size of the circular progress in CSS units-
thicknessstring | numberThe thickness of progress indicator as a ratio of `size`. Must be between `0` and `1`-
trackColorstringThe color name of the progress track. Use a color key in the theme object-
valuenumberCurrent progress (must be between min/max)-
valueTextstringThe desired valueText to use in place of the value-
Edit this page