# Progress Bar

> **Deprecated.** Use [ProgressIndicator](../ProgressIndicator/ProgressIndicator.md) for new
> work. `ProgressIndicator` is the supported determinate progress indicator
> going forward — it offers the same semantic with a cleaner prop surface
> (`value` / `max` instead of `currentStep` / `totalSteps`,
> `variation="continuous"` instead of `"progress"`, plain `className` / `style`
> instead of `UNSAFE_*`), theme-adaptive tokens, and a unified
> `<div role="progressbar">` structure across continuous and stepped variations.
> `ProgressBar` continues to work unchanged for existing call sites.

A ProgressBar is a visual indicator of how close something is to completion.

## Design & usage guidelines

The ProgressBar should be used to show "definite" progress; we know exactly how
close the process is to completion. For "indefinite" progress, where we may not
know exactly how much longer something might take, use a
[Spinner](/components/Spinner).

Some great use cases for a ProgressBar include:

* Setup wizard, where we know how many steps the user has completed and how many
  steps remain.
* File uploads, where we know the total file size and how much data has already
  been sent.

An example where you might be better served using a Spinner:

* Loading a calendar within a view, where we do not know it's "complete" until
  there's no more data left to load.


## Props

### Mobile

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `current` | `number` | Yes | — | The number of items that are currently completed |
| `total` | `number` | Yes | — | The total number of items to be completed |
| `header` | `ReactNode` | No | — | Component to render above the progress bar. |
| `inProgress` | `number` | No | `0` | The number of items in progress (not completed, but to be less than the total); not applicable with stepped variation |
| `loading` | `boolean` | No | — | If the progress bar is loading, the progress indicators aren't rendered on the screen |
| `reverseTheme` | `boolean` | No | `false` | If the amountFormatted and totalAmountFormatted text needs to appear more visibile because of the background, for exa... |
| `size` | `"base" | "small" | "smaller"` | No | `base` | Set the size of the progress bar |
| `UNSAFE_style` | `ProgressBarUnsafeStyle` | No | — | **Use at your own risk:** Custom style for specific elements. This should only be used as a **last resort**. Using th... |
| `variation` | `"progress" | "stepped"` | No | `progress` | Set the variation of the progress bar |