---
id: circular-progress
category: feedback
title: Circular Progress
package: '@chakra-ui/progress'
description:
  Circular Progress is used to indicates the progress for determinate and
  indeterminate processes.
---

## Import

```js
import { CircularProgress, CircularProgressLabel } from '@chakra-ui/react'
```

## Usage

There are two types of progress indicators: determinate and indeterminate.

- Determinate progress: fills the circular track with color, as the indicator
  moves from 0 to 360 degrees.
- Indeterminate progress: grows and shrinks the indicator while moving along the
  circular track.

```jsx
<CircularProgress value={80} />
```

### Changing the size

You can add `size` prop to the progress bar to add a custom size.

```jsx
// Change the size to 120px
<CircularProgress value={30} size='120px' />
```

### Changing the thickness

You can add the `thickness` prop to update the thickness of the progress ring.

> This defines the stroke width of the svg circle.

```jsx
<CircularProgress value={59} size='100px' thickness='4px' />
```

### Changing the color

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

```jsx
<CircularProgress value={30} color='orange.400' thickness='12px' />
```

### Adding label

Chakra exports a `CircularProgressLabel` to help you add a label. Pass this
component as `children` prop and you'll be able to render the value.

```jsx
<CircularProgress value={40} color='green.400'>
  <CircularProgressLabel>40%</CircularProgressLabel>
</CircularProgress>
```

### Indeterminate Progress

Setting the progress to indeterminate means you're not able to determine the
`value` upfront. Pass the `isIndeterminate` prop to activate this state.

```jsx
<CircularProgress isIndeterminate color='green.300' />
```

### Accessibility

- Progress has `role` set to `progressbar` to denote that it is a progress bar.
- Progress has `aria-valuenow` set to the percentage completion value passed to
  the component, to ensure the progress percent is visible to screen readers.