Circular Progress

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

View sourceView theme 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} />

<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' />

// 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' />

<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' />

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

<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' />

<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

capIsRound

Description

If true, the cap of the progress indicator will be rounded.

Type

boolean

getValueText

Description

A function that returns the desired valueText to use in place of the value

Type

((value: number, percent: number) => string)

isIndeterminate

Description

If true, the progress will be indeterminate and the value prop will be ignored

Type

boolean

max

Description

Maximum value defining 100% progress made (must be higher than 'min')

Type

number

Default

100

min

Description

Minimum value defining 'no progress' (must be lower than 'max')

Type

number

Default

0

size

Description

Sizes for CircularProgress are not implemented in the default theme. You can extend the theme to implement them.

Type

string

thickness

Description

This defines the stroke width of the svg circle.

Type

string | number

Default

"10px"

trackColor

Description

The color name of the progress track. Use a color key in the theme object

Type

string

value

Description

Current progress (must be between min/max)

Type

number

valueText

Description

The desired valueText to use in place of the value

Type

string