Circular Progress

The Circular Progress component is used to indicates the progress for both 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.

See CCircularProgress's accessibility report

Import#

import { CCircularProgress, CCircularProgressLabel } from "@chakra-ui/vue";

Usage#

<c-circular-progress :value="80" />

Changing the size#

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

// Change the size to 120px
<c-circular-progress :value="30" size="120px" />

Changing the thickness#

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

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

// 10% of size (100px) => 10px
<c-circular-progress :value="30" size="120px" :thickness="0.1" />

Changing the color#

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

<c-circular-progress :value="30" color="orange" :thickness="0.1" />

Adding label#

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

<c-circular-progress :value="40" color="green">
  <c-circular-progress-label>40%</c-circular-progress-label>
</c-circular-progress>

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.

<c-circular-progress is-indeterminate />

Accessibility#

• CCircularProgress has a role set to progressbar to denote that it's a progress bar
• CCircularProgress has aria-valuenow set to the percentage completion value passed to the component, to ensure the progress percent is visible to screen readers.

Props#

Slots#