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 { CCircularProgress, CCircularProgressLabel } from "@chakra-ui/vue";


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

Changing the size#

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

Editable Example
// 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.

Editable Example
// 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.

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

Editable Example
<c-circular-progress :value="40" color="green">

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.

Editable Example
<c-circular-progress is-indeterminate />


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


sizestring48pxThe size of the circular progress in CSS units
maxnumber100Maximum value defining 100% progress made (must be higher than 'min')
minnumber0Minimum value defining 'no progress' (must be lower than 'max')
valuenumberCurrent progress (must be between min/max)
isIndeterminatebooleanPuts the component into 'indeterminate' state; Ignores 'value' prop
thicknessnumber0.2The thickness of progress indicator as a ratio of size. Must be between 0 and 1
anglenumber0Angle to rotate progress indicator by
trackColorstringgrayThe color name of the progress track. Use a color key in the theme object
colorstringblueThe color of the progress indicator. Use a color key in the theme object


defaultUsed for the CCircularProgressLabel to display the current progress percentage

❤️ Contribute to this page

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!