---
name: ProgressBar
package: '@wordpress/components'
category: Feedback
status: stable
canonical: 'https://system.automattic.design/components/progressbar/'
storybook: 'https://wordpress.github.io/gutenberg/?path=/docs/components-progressbar--docs'
github: 'https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src/progress-bar'
figma: 'https://www.figma.com/design/jMgzw8IhsMC4gpMbMko4lv/WPDS--Gutenberg-22.3-?node-id=14299-62382'
---

# 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.

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

## Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `number` | — | Value of the progress bar. |
| `className` | `string` | — | A CSS class to apply to the progress bar wrapper (track) element. |


## Examples

### Default

```tsx
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%;
}
```

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