ProgressBar

Copy for LLM

Represents the completion progress of a task.

Import

import { ProgressBar } from "@cfa/react-core";

Live Editor

Guidelines

When to use

ProgressBar is a read-only bar that shows an operation is in progress, with a percentage when it is known.

Do

Use determinate mode when completion percentage is known, such as file uploads, form submission, or data saving.
Use indeterminate mode when duration is unknown but the operation is expected to take longer than about 2 seconds.
Show a percentage label for determinate progress. Round to whole numbers unless higher precision is required.
For determinate progress, keep aria-valuenow in sync with the visible percentage. For indeterminate progress, omit aria-valuenow.

Avoid

Using ProgressBar for instant operations under about 1 second.
Using ProgressBar for a linear multi-step flow where people navigate steps. Use Stepper.
Using indeterminate mode when a simple spinner is enough. Use LoadingIndicator.

Examples

Fill color

The fill uses the info semantic color by default and switches to success green when the value reaches maxValue. Override the in-progress fill with the --progress-bar-fill-color CSS variable.

Compact

The compact prop can be used to reduce the height of the Progress Bar.

Format Options

Values are formatted as a percentage by default, but this can be modified by using the formatOptions prop to specify a different format. formatOptions is compatible with the option parameter of Intl.NumberFormat and is applied based on the current locale.

The valueLabel prop is available to customize the label when changing the scale of the Progress Bar with minValue and maxValue.