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

    SourceTheme source@chakra-ui/progress


import { Progress } from '@chakra-ui/react'


<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 bar’s background color.

<Progress hasStripe value={64} />

Progress sizes#

There are two ways you can increase the height of the progress bar:

  • You can add size prop to increase the height of the progress bar.
  • You can also use the height prop to manually set a height.
<Stack spacing={5}>
<Progress colorScheme='green' size='sm' value={20} />
<Progress colorScheme='green' size='md' value={20} />
<Progress colorScheme='green' size='lg' value={20} />
<Progress colorScheme='green' height='32px' value={20} />

Progress color scheme#

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

<Progress value={20} size='xs' colorScheme='pink' />

Animated Progress#

To show an animated progress, pass the isIndeterminate prop.

<Progress size='xs' isIndeterminate />


  • Progress has a role set to progressbar to denote that it is 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.
Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel