Progress

Import#

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

Usage#

<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 gap={5}>
  <Progress colorPalette='green' size='sm' value={20} />
  <Progress colorPalette='green' size='md' value={20} />
  <Progress colorPalette='green' size='lg' value={20} />
  <Progress colorPalette='green' height='32px' value={20} />
</Stack>

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' colorPalette='pink' />

Animated Progress#

To show an animated progress, pass the isIndeterminate prop.

<Progress size='xs' isIndeterminate />

Accessibility#

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

Props#