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


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


Editable Example

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.

Editable Example

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

Progress color scheme#

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

Editable Example

Animated Progress#

To show an animated progress, pass the isIndeterminate prop.

Editable Example


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


colorScheme"blue" | "cyan" | "gray" | "green" | "orange" | "pink" | "purple" | "red" | "teal" | "yellow" | "whiteAlpha" | "blackAlpha" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram""blue"
hasStripebooleanIf `true`, the progress bar will show stripe-
isAnimatedbooleanIf `true`, and hasStripe is `true`, the stripes will be animated-
isIndeterminatebooleanIf `true`, the progress will be indeterminate and the `value` prop will be ignored-
maxnumberThe maximum value of the progress-
minnumberThe minimum value of the progress-
size"sm" | "md" | "lg" | "xs""md"
valuenumberThe `value` of the progress indicator. If `undefined` the progress bar will be in `indeterminate` state-
variantstringVariants for Progress are not implemented in the default theme. You can extend the theme to implement them.-