Progress is used to display the progress status for a task that takes a long time or consists of several steps.


import { CProgress } from '@chakra-ui/vue'


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

Progress with Stripe#

You can add hasStripe prop to any progress bar to apply a stripe via a CSS gradient over the progress bars background color.

Editable Example
<c-progress has-stripe :value="59" />

Progress sizes#

There are two ways you can increase the height of the progressbar:

  • You can add size prop to increase the height of the progressbar.
  • You can also use the height prop to manually set a height.
Editable Example
<c-stack :spacing="5">
  <c-progress color="vue" size="sm" :value="20" />
  <c-progress color="vue" size="md" :value="40" />
  <c-progress color="vue" size="lg" :value="50" />
  <c-progress color="vue" height="32px" :value="30" />

Progress color#

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

Editable Example
<c-progress color="gray" has-stripe />

Animated Progress#

The striped gradient can also be animated. Add isAnimated and hasStripe prop to the progress bar to animate the stripes right to left via CSS3 animations.

Editable Example
<c-progress has-stripe is-animated />


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


valuenumberCurrent progress of the progressbar
colorstringblueColor of the progressbar
hasStripebooleanfalseDetermines if the progressbar has stripe
isAnimatedbooleanfalseDetermines if the progressbar is animated

❤️ Contribute to this page

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