Progress API

Import

import { ProgressBar } from "@stratakit/bricks";
// OR
import * as Progress from "@stratakit/bricks/Progress";

Progress.ProgressBar

Base element: <div>

A linear progress bar for indicating progress of an operation (or loading of data). This component maps to the ARIA progressbar role and must be labelled using aria-labelledby.

Note: A progress bar is indeterminate if no value is passed.

Example:

<ProgressBar aria-labelledby={…} /> // indeterminate
<ProgressBar aria-labelledby={…} value={50} /> // determinate

Supports a tone prop to change the tone (color) of the progress bar. Supports a size prop to change the size of the progress bar.

aria-labelledby

Type: string (required)

Label for the progress bar.

This prop is required because role="progressbar" requires an accessible name.

size

Type: "medium" | "large" | undefined (optional)

Default: "medium"

The size of the progress bar.

tone

Type: "neutral" | "accent" | undefined (optional)

Default: "neutral"

The tone of the progress bar.

value

Type: number | undefined (optional)

The value of the progress bar between 0 and 100 (inclusive). This value is rounded to 3 decimal places.

• If passed, the progress bar will be determinate.
• If not passed, the progress bar will be indeterminate.

Note: Indeterminate progress bars (value not passed) should only be used for indicating the progress of short operations (i.e. less than 5 seconds).

Additional props

• render