Circular Progress

Circular Progress is used to indicates 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/core"

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

<CircularProgress value={80} />

<CircularProgress value={80} />

Editable Example

You can add size prop to the progressbar 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" />

Editable Example

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.

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

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

Editable Example

You can add color prop to any progressbar 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" />

Editable Example

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

40%

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

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

Editable Example

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

Editable Example

Progress has role set to progressbar to denote that it's 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.

Name	Type	Default	Description
size	`string`	`48px`	The size of the circular progress in CSS units
max	`number`	`100`	Maximum value defining 100% progress made (must be higher than 'min')
min	`number`	`0`	Minimum value defining 'no progress' (must be lower than 'max')
value	`number`		Current progress (must be between min/max)
isIndeterminate	`boolean`		Puts the component into indeterminate state. When passed, the 'value' prop is ignored
thickness	`string or number`	`10px`	The thickness of progress indicator
angle	`number`	`0`	Angle to rotate progress indicator by
capIsRound	`boolean`		If `true`, the cap of the progress indicator will be rounded
children	`React.ReactNode`		The content of the circular progress bar. If passed, the content will be inside and centered in the progress bar
trackColor	`string`	`gray`	The color name of the progress track. Use a color key in the theme object
color	`string`	`blue`	The color of the progress indicator. Use a color key in the theme object