Progress

The Progress component is an element that displays the progress status for a
task that takes a long time or consists of several steps.

Installation

``sh
yarn add @chakra-ui/progress

or

npm i @chakra-ui/progress
`

Import Components

`jsx
import {
Progress,
ProgressLabel,
CircularProgress,
CircularProgressLabel,
} from "@chakra-ui/progress"
`

Usage

`jsx

`

Linear Progress

`jsx

`

Color

Pass the color prop to apply any color that exists in the theme to the
progress

`jsx

`

Sizes

Pass the size prop to increase the height of the progress

`jsx


`

Indeterminate

Pass the value for the progress as undefined to put the progress component
in the indeterminate state

`jsx

`

With stripe

Pass the hasStripe prop to have a beautiful gradient to create a striped
effect on the progress

`jsx

`

With animation

Pass the isAnimated prop combined with the hasStrip prop to get a
beautifully animated progress

`jsx

`

With label

Use the ProgressLabel utility component to have a label for the progress
component

`jsx

60%

`

Circular progress

`jsx

`

Circular progress size

Pass the size prop to change the size of the circular progress. You can also
pass the thickness prop to change the thickness of the circular progress. The
thickness prop is a fractional value whose actual value is determined by the
size of the circular progress. In this example the circular progress will have
a thickness of 30px. 50% of size (120px) => 30px

`jsx

`

Circular progress color

Pass the color prop to apply any color that exists in the theme

`jsx

`

Circular progress with label

Use the CircularProgressLabel utility component to have a label for the
circular progress

`jsx

60%

`

Accessibility

- Progress has a 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.

Note

The CircularProgress and the Spinner may seem to serve the same purpose, but
semantically, they don't. In the indeterminate state they have the following
difference.

$3

It is used to denote the progress of a determinate operation. Take for example
an image upload operation:

- Before upload begins, the upload progress is indeterminate (at this point,
it’s just spinning),
- Once we know the size of the image and begin upload (using axios) then we
update the progress value of the CircularProgress (at this point, it shows the
progress). CircularProgress also comes with the aria-\* attributes to make its
progress value accessible to screenreaders.

CircularProgress also comes with the aria-\* attributes to make its progress
value accessible to screenreaders.

$3

It is more of a “presentational” loading indicator you can use on a page or a
component, while it’s loading, or before it renders. It doesn't have any
semantic meaning.

To give meaning to a Spinner/loading indicator, ARIA standards require that you
mark the area of the component/page that’s loading with aria-busy=true`.