ProgressBar

A simple horizontal progress bar component.

Supports two modes: determinate and indeterminate. A progress bar is determinate when a specific progress value has been specified (from 0 to 100), and indeterminate when a value hasn’t been specified.

View on Storybook

View source on GitHub

Import

import { ProgressBar } from '@wordpress/components';

Examples

Default

const Default = () => {
    return <ProgressBar />;
};

With Custom Width

A progress bar with a custom width. You can override the default width by passing a custom CSS class via the className prop. This example shows a progress bar with an overridden width of 100% which makes it fit all available horizontal space of the parent element. The CSS class looks like this: css .custom-progress-bar { width: 100%; }

const WithCustomWidth = () => {
    return <ProgressBar className="custom-progress-bar" />;
};