Automattic Design System

Components

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.

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

View on Storybook

View in Figma

View source on GitHub

PropsPermalink to this section

NameDefaultDescription
value

number

Value of the progress bar.

className

string

A CSS class to apply to the progress bar wrapper (track) element.

ExamplesPermalink to this section

DefaultPermalink to this section

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

With Custom WidthPermalink to this section

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:

.custom-progress-bar {
  width: 100%;
}
const WithCustomWidth = () => {
    return <ProgressBar className="custom-progress-bar" />;
};