Circular Progress

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

• Determinate progress fill the circular track with color, as the indicator moves from 0 to 360 degrees.
• Indeterminate progress grow and shrink the indicator while moving along the circular track.

Import#

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

Usage#

<CircularProgress value={80} />

Changing the size#

You can add size prop to the progressbar to add a custom size.

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

Changing the thickness#

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

// 10% of size (100px) => 10px
<CircularProgress value={59} size="100px" thickness={0.1} />

Changing the color#

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

<CircularProgress value={30} color="orange" thickness={0.1} />

Adding label#

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

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

Indeterminate Progress#

Setting the progress to indeterminate means you're not able to determine the value upfront, so won't need to pass the value prop.

<CircularProgress isIndeterminate color="green"></CircularProgress>

Accessibility#

• Progress has a 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.

Props#