---
id: progress
category: feedback
title: Progress
package: '@chakra-ui/progress'
description:
  Progress is used to display the progress status for a task that takes a long
  time or consists of several steps.
---

## Import

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

## Usage

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

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

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

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

### Animated Progress

To show an animated progress, pass the `isIndeterminate` prop.

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