Progress

The progress bar is used to visually represent the completion of a task or operation. It shows how much of the task has been completed, and how much remains.

Import

import { Progress } from '@outfitio/outkit';

Usage

Progress sizes

You can use the size prop to increase the height of the progress bar. The supported sizes are sm, md and lg. You can also use the height prop to manually set a height.

Progress color

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

Animated progress

The striped gradient can also be animated. Just add isAnimated and hasStripe prop to the progressbar to animate the stripes right to left via CSS3 animations.

Accessibility

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

Best Practice

Progress bars should only be used if the progress can be measured. If not, use the Spinner or Skeleton components instead.