# 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](../Spinner/Spinner.md).

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

### Web

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `currentStep` | `number` | Yes | — | The current step that the progress bar is on. |
| `totalSteps` | `number` | Yes | — | The total steps to use. For percentages you can set this to 100. |
| `size` | `"base" | "small" | "smaller"` | No | `base` | Set the size of the progress bar |
| `UNSAFE_className` | `string` | No | — | **Use at your own risk:** Custom class names for specific elements. This should only be used as a **last resort**. Us... |
| `UNSAFE_style` | `CSSProperties` | 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 |