Progress

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

View sourceView theme source@chakra-ui/progress

Import

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

Usage

<Progress value={80} />

<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 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} /> </Stack>

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

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

Animated Progress

To show an animated progress, pass the isIndeterminate prop.

<Progress size='xs' isIndeterminate />

<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

colorScheme

Type

"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"

Default

"blue"

hasStripe

Description

If true, the progress bar will show stripe

Type

boolean

isAnimated

Description

If true, and hasStripe is true, the stripes will be animated

Type

boolean

isIndeterminate

Description

If true, the progress will be indeterminate and the value prop will be ignored

Type

boolean

max

Description

The maximum value of the progress

Type

number

Default

100

min

Description

The minimum value of the progress

Type

number

Default

0

size

Type

"xs" | "sm" | "md" | "lg"

Default

"md"

value

Description

The value of the progress indicator. If undefined the progress bar will be in indeterminate state

Type

number

variant

Description

Variants for Progress are not implemented in the default theme. You can extend the theme to implement them.

Type

string