Circular Progress

Circular Progress is used to indicates the progress for determinate and indeterminate processes.

• Determinate progress fill the circular track with color, as the indicator moves from 0 to 360 degrees.
• Indeterminate progress grow and shrink the indicator while moving along the circular track.

Import

import { CircularProgress, CircularProgressLabel } from '@outfitio/outkit';

Usage

Changing the size

You can add size prop to the progressbar to add a custom size.

Changing the thickness

You can add thickness prop to update the thicknessof the progress ring.

The thickness has to be a ratio of the size. Value should be between 0 and 1.

Changing the color

You can add color prop to any progressbar to apply any color that exists in the theme.

Adding label

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

Indeterminate Progress

Setting the progress to indeterminate means you're not able to determine the value upfront, so won't need to pass the value prop.

Accessibility

ARIA

• Progress has a role set to progressbar to denote that it's 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.

Props