Progress

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

Import#

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

Usage#

<DarkMode>
  <Progress value={80} />
</DarkMode>

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

<DarkMode>
  <Progress hasStripe value={64} />
</DarkMode>

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

<DarkMode>
  <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>
</DarkMode>

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

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

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

Animated Progress#

To show an animated progress, pass the isIndeterminate prop.

<DarkMode>
  <Progress size="xs" isIndeterminate />
</DarkMode>

<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

`min`

Description

The minimum value of the progress

Type

number

`size`

Type

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

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