Progress

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

Chakra UI Pro: Start your application or marketing site with a growing collection of beautiful and responsive UI components.

Ads via Chakra UI

Import#

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

Usage#

<Progress value={80} />

<Progress value={80} />

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.

<Progress hasStripe value={64} />

<Progress hasStripe value={64} />

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.

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

Editable Example

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

Editable Example

Animated Progress#

To show an animated progress, pass the isIndeterminate prop.

<Progress size="xs" isIndeterminate />

<Progress size="xs" isIndeterminate />

Editable Example

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#

Name	Type	Description	Default
colorScheme	`"blue" \| "cyan" \| "gray" \| "green" \| "orange" \| "pink" \| "purple" \| "red" \| "teal" \| "yellow" \| "whiteAlpha" \| "blackAlpha" \| "linkedin" \| "facebook" \| "messenger" \| "whatsapp" \| "twitter" \| "telegram"`		`"blue"`
hasStripe	`boolean`	If `true`, the progress bar will show stripe	-
isAnimated	`boolean`	If `true`, and hasStripe is `true`, the stripes will be animated	-
isIndeterminate	`boolean`	If `true`, the progress will be indeterminate and the `value` prop will be ignored	-
max	`number`	The maximum value of the progress	-
min	`number`	The minimum value of the progress	-
size	`"sm" \| "md" \| "lg" \| "xs"`		`"md"`
value	`number`	The `value` of the progress indicator. If `undefined` the progress bar will be in `indeterminate` state	-
variant	`string`	Variants for `Progress` are not implemented in the default theme. You can extend the theme to implement them.	-

Edit this page