<h2>What’s new in v3</h2>
<ul>
<li><strong>Success and error states:</strong> Each state shows an icon and message below the bar.</li>
<li><strong>Helper text:</strong> Supported in both label positions.</li>
<li><strong>Spacing:</strong> Were made for the left‑aligned label layout (small = 4px, medium = 8px).</li>
<li><strong>Border radius:</strong> Was added to the bar for consistency with other core components.</li>
<li><strong>Design tokens:</strong> Provide a unified set of values for key properties, ensuring consistency across components and enabling easier customization. Learn more on the <a href="/getting-started/tokens">tokens page</a> and view the component’s token values in its <a href="?tab=Tokens">tokens tab</a>.</li>
</ul>
<h2>When to use</h2>
<p>Progress bars visualize the completion status of a task or process, helping users understand how far along they are and what remains.</p>
<p>Use progress bars to:</p>
<ul>
<li>Show the current progress of ongoing operations such as loading, uploading, downloading, or processing.</li>
<li>Provide users with clear feedback during wait times, reducing uncertainty.</li>
<li>Set expectations by indicating percentage completion or relative advancement.</li>
</ul>
<p>Progress bar, progress tracker, and loading indicator serve different purposes. Selecting the right component improves clarity for all users, including people with cognitive disabilities or those using screen readers.</p>
<table>
<thead>
<tr>
<th>Component</th>
<th>Use case</th>
</tr>
</thead>
<tbody><tr>
<td>Progress bar</td>
<td>Provides visual or quantitative feedback to users regarding how long a system will take to complete a system process. This component is not intended for use during loading or submission events under five seconds.</td>
</tr>
<tr>
<td><a href="/components/progress-tracker/">Progress tracker</a></td>
<td>Display the user’s location within a multistep process while providing the status of each step. In these cases, progress is user-initiated.</td>
</tr>
<tr>
<td><a href="/components/loading-indicator/">Loading indicator</a></td>
<td>A visual animation used to convey processing or loading, but does not indicate how long the activity will take to complete.</td>
</tr>
</tbody></table>
<h2>Anatomy</h2>
<p>The search component contains four elements.</p>
<details data-name='image-block' data-images='[{"alt":"","caption":"\nA progress bar can include up to five elements:\n\n1. **Label (optional):** A short description of the process. It can be visually hidden but must be present for accessibility.\n2. **Helper text (optional):** Additional context or guidance about the process. Not available when using the start placement option.\n3. **Bar:** The indicator that shows how much of the task is complete.\n\n   * Determinate bars fill based on progress.\n   * Indeterminate bars stay a fixed size and animate continuously.\n4. **Track:** The background area the bar fills or moves across.\n5. **Value (for determinate bars):** Shows the progress as a percentage, fraction, or number for determinate bars. When the task finishes or fails, the value is replaced with a **success or error icon** to clearly communicate the outcome.","url":"https://dds.dell.com/site/v3/components/progress-bar/progress-bar-anatomy.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details><h2>Resources</h2>
<details data-name='card-collection' data-cards='[{"image":{"url":"","alt":""},"link":{"label":"Visit NN/g website","path":"https://www.nngroup.com/articles/progress-indicators/","type":"External"},"title":"Progress indicators article","description":"Read the Nielsen Norman Group&#39;s article on progress bar.","icon":"pop-up-arrow-corner"},{"image":{"url":"","alt":""},"link":{"label":"Visit NN/g website","path":"https://www.nngroup.com/articles/designing-for-waits-and-interruptions/","type":"External"},"title":"Designing for long waits and interruptions","description":"Read the Nielsen Norman Group&#39;s article on progress bar.","icon":"pop-up-arrow-corner"}]' data-NumberOfColumns='3' data-NumberOfColumnsMedium='2' data-NumberOfColumnsSmall='1' data-hideWidget='false'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

angular

Angular

react

React

## Usage

Use progress bars to give users clear insight into how long a process will take or how much of it is complete.h

### File operations (uploading and downloading)

**Downloading**

Show a progress bar when you can provide an estimated time or percentage of completion. For example, if the file size is known, show the user how much of the file has downloaded and the estimated time remaining.

**Uploading**

Show progress when the system can calculate it. If real‑time progress is not available, still show a progress bar that updates as soon as information becomes available. Use the file name and extension as the label for uploaded files.

<details data-name='image-block' data-images='[{"alt":"An example uploading a file, showing 75% completion.","caption":"Progress bar labels can be used to show file names and extensions of uploaded files.","url":"https://dds.dell.com/site/v3/components/progress-bar/progress-bar-usage-file-operations.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

### Multiple ongoing tasks

Use progress bars inside tables when presenting a high‑level view of multiple ongoing tasks, such as updates or installations. The table header works as the group label for the entire column. Inside the column, each progress bar needs its own value label. Use this pattern when users need to compare the progress of several items at once.

<details data-name='image-block' data-images='[{"alt":"Example of using progress bars within a table to show update statuses.","caption":"\nExample of progress bars inside tables in compact spaces where vertical space is limited.","url":"https://dds.dell.com/site/v3/components/progress-bar/progress-bar-usage-ongoing-tasks.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

### When progress can’t be measured

If a process starts before the system can show measurable progress, still display an **indeterminate** progress bar to indicate that work has begun.

Once progress can be determined, the progress bar should switch to the **determinate** kind. In this case, the label and any helper text should remain with size, text placement, and spacing preserved.

<details data-name='image-block' data-images='[{"alt":"An indeterminate progress bar switching to a determinate version once time to completion is calculated.","caption":"Example on the left side (“Checking for updates...” is an indeterminate progress bar. Example on right side (“Installing”) is a determinate progress bar.\nUse helper text below the progress bar when you need to give users additional details.","url":"https://dds.dell.com/site/v3/components/progress-bar/progress-bar-usage-indeterminate.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Kinds

Progress bars can be **determinate** or **indeterminate**. 

Use a **determinate progress bar** when you are able to calculate the percent completion. It fills across the track as their percent completion increases from 0% to 100%. A value is required.

Use an **indeterminate progress bar** when you are unable to calculate the wait time. It shows a fixed bar moving along the track until the process is complete or until an estimated wait time is known.

<details data-name='image-block' data-images='[{"alt":"Progress bar showing label, helper text, and value.","caption":"Determinate progress bar","url":"https://dds.dell.com/site/v3/components/progress-bar/progress-bar-determinate.png"},{"alt":"Indeterminate progress bar showing label and helper text.","caption":"Indeterminate progress bar","url":"https://dds.dell.com/site/v3/components/progress-bar/progress-bar-indeterminate.png"}]' data-numberofcolumns='2' data-hideWidget='false'></details>

### Options

Use labels and values to help users understand what the progress bar represents. The options below show how progress bars can appear depending on what information is available.

**With label and value**

Use both when you can name the task and show progress.

**With value only**

Use this when progress is measurable, but the task is already clear from the context.

**Without label or value**

Use this when progress can’t be measured yet or when the action is obvious without extra text.

<details data-name='image-block' data-images='[{"alt":"Determinate progress bar with label, helper text, and value.","caption":"**With label and value:** For determinate progress bars, provide a label that concisely describes the operation.","url":"https://dds.dell.com/site/v3/components/progress-bar/progress-bar-determinate.png"},{"alt":"Determinate progress bar with helper text and value.","caption":"**With value:** A value is required for determinate progress bars.","url":"https://dds.dell.com/site/v3/components/progress-bar/progress-bar-options-value.png"},{"alt":"Indeterminate progress bar without label or helper text.","caption":"**Without label or value:** An indeterminate progress bar can be shown without a label.","url":"https://dds.dell.com/site/v3/components/progress-bar/progress-bar-nolabel-novalue.png"}]' data-numberofcolumns='3' data-hideWidget='false'></details>

## Sizes

Progress bars come in three sizes: large (default), medium, and small. When using multiple progress bars, they should match in size and align with the relative width of the experience.

<details data-name='image-block' data-images='[{"alt":"Large, determinate progress bar with label, helper text, and percentage.","caption":"","url":"https://dds.dell.com/site/v3/components/progress-bar/progress-bar-sizes-large.png"},{"alt":"Medium determinate progress bar with label, helper text, and percentage.","caption":"","url":"https://dds.dell.com/site/v3/components/progress-bar/progress-bar-sizes-medium.png"},{"alt":"Small determinate progress bar with label, helper text, and percentage.","caption":"","url":"https://dds.dell.com/site/v3/components/progress-bar/progress-bar-sizes-small.png"}]' data-numberofcolumns='3' data-hideWidget='false'></details>

| Size   | Use case                                                                                                                                                                             |
| ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Large  | This default size can be used in most cases, as long as you can maintain visual balance.                                                                                             |
| Medium | Medium is provided for experiences with a higher density of information or content, and should be used in cases where the default size does not match the sizes of other components. |
| Small  | Recommended for use when there is limited spaces or within components such a drawers or cards.                                                                                       |

## Layout

### Specifications

When grouping progress bars, the recommended space between each bar should be a multiple of 4 pixels, horizontally and vertically (read more about the [baseline grid](https://www.delldesignsystem.com/foundations/grid/#baseline-grid) on the grid foundations page). Specified margins for each progress bar size are shown below. All units of measurement are in pixels.

<details data-name='image-block' data-images='[{"alt":"An image showing stacked progress bars with 20 pixels of padding. ","caption":"A stack of large progress bars with 20 pixels of padding.","url":"https://dds.dell.com/site/v3/components/progress-bar/progress-bar-specifications-large.png"},{"alt":"An image showing stacked progress bars with 16 pixels of padding. ","caption":"A stack of medium progress bars with 16 pixels of padding.","url":"https://dds.dell.com/site/v3/components/progress-bar/progress-bar-specifications-medium.png"},{"alt":"An image showing stacked progress bars with 12 pixels of padding.","caption":"A stack of small progress bars with 12 pixels of padding.","url":"https://dds.dell.com/site/v3/components/progress-bar/progress-bar-specifications-small.png"}]' data-numberofcolumns='3' data-hideWidget='false'></details>

### Alignment

Progress bars support two label placements:

 **Top alignment**

* The label appears above the progress bar.
* Use when you need more space for the label or helper text.

**Left alignment**

* The label appears to the left of the progress bar.
* Use for compact, horizontal layouts.

<details data-name='image-block' data-images='[{"alt":"","caption":"\nTop alignment","url":"https://dds.dell.com/site/v3/components/progress-bar/progress-bar-alignment-top.png"},{"alt":"","caption":"\nLeft alignment","url":"https://dds.dell.com/site/v3/components/progress-bar/progress-bar-alignment-left.png"}]' data-numberofcolumns='2' data-hideWidget='false'></details>

## Interaction

### Success or error states

Progress bars use success and error states to clearly show when a process completes or fails. These states help users quickly understand the result without extra effort.

When a state is triggered:

* An icon and message appear below the progress bar, aligned with the label.
* The bar changes to the success (green) or error (red) style.
* For success, the percentage displays 100%. For error, the percentage value is removed.
* The bar stops updating, indicating the process has ended.

<details data-name='image-block' data-images='[{"alt":"Success state","caption":"","url":"https://dds.dell.com/site/v3/components/progress-bar/progress-bar-interaction-success.png"},{"alt":"Error state","caption":"","url":"https://dds.dell.com/site/v3/components/progress-bar/progress-bar-interaction-error.png"}]' data-numberofcolumns='2' data-hideWidget='false'></details>

### Animation

Animation in the progress bar depends on whether the progress is determinate or not.

A determinate progress bar shows an animation that fills the track as it progresses from 0% toward 100%.

An indeterminate progress bar shows a fixed bar that repeatedly moves across the track.

## Standards

### Accessibility

**Ensure each progress bar meets the appropriate level of contrast**
Both the label and animation must meet a contrast ratio of 3:1 or greater with the page background. Consider increasing available contrast when possible.
WCAG 2.2: [1.4.3 Contrast (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum), [1.4.11 Non-text Contrast (w3.org)](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast)

[](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast)
**Use the top placement when stacking progress bars in an on-page experience**
Including a label gives all users the clearest indication of what’s happening. As users typically read from top to bottom and left to right, placing the label on top means that the text explanation is the first thing they see.

**If the same system function occurs on a different page or screen in an application or set of pages, it should be identified with the same language**
This reduces the cognitive load for people with cognitive difficulties.
WCAG 2.2: [3.2.4 Consistent Identification (w3.org)](https://www.w3.org/WAI/WCAG22/Understanding/consistent-identification)

### Content

**Use a clear and concise label**

The progress bar’s label should be short, meaningful, and accurate to the pending action. Avoid using jargon. Technical language should be similarly avoided unless it’s absolutely critical to the understanding of the intended audience.
**Do:** Downloading
**Don’t:** Downloading file

**When uploading, use the file name and extension as the label**

Showing the file name and extension helps users confirm they are uploading their intended file. For longer file names that may impinge on the space for value, truncate the text in the middle so that the extension is still visible.
**Do:** Progress bar guidelines.pdf
**Don’t:** Uploading file

Design

## Tokens

Component tokens define the visual decisions used by this component. Use these tokens to adjust the component while preserving consistency and accessibility across the system.

The table below lists all tokens consumed by the component, including their name, collection, associated CSS variable, and a preview.

For more details about tokens and how they work across the system, see the [tokens documentation](/getting-started/tokens).
| Name                               | Collection | CSS var                                         | Preview |
| ---------------------------------- | ---------- | ----------------------------------------------- | ------- |
| spacing/xs                         | Semantic   | `var(--dds-spacing-xs)`                         | -       |
| spacing/sm                         | Semantic   | `var(--dds-spacing-sm)`                         | -       |
| color/text/secondary               | Semantic   | `var(--dds-color-text-secondary)`               | #293B4D |
| color/text/tertiary                | Semantic   | `var(--dds-color-text-tertiary)`                | #5C6E7E |
| progress-bar/height/lg             | Component  | `var(--dds-progress-bar-height-lg)`             | -       |
| border/radius/xs                   | Semantic   | `var(--dds-border-radius-xs)`                   | -       |
| color/background/SURFACE/secondary | Semantic   | `var(--dds-color-background-surface-secondary)` | #EBF1F6 |
| color/background/BRAND/base-rest   | Semantic   | `var(--dds-color-background-brand-base-rest)`   | #0672CB |
| color/background/SUCCESS/base-rest | Semantic   | `var(--dds-color-background-success-base-rest)` | #4F7D00 |
| helper-text/gap                    | Component  | `var(--dds-helper-text-gap)`                    | -       |
| helper-text/icon/height            | Internal   | `var(--dds-helper-text-icon-height)`            | -       |
| icon/size/xs                       | Component  | `var(--dds-icon-size-xs)`                       | -       |
| color/text/SUCCESS/rest            | Semantic   | `var(--dds-color-text-success-rest)`            | #436F00 |
| progress-bar/height/md             | Component  | `var(--dds-progress-bar-height-md)`             | -       |
| progress-bar/height/sm             | Component  | `var(--dds-progress-bar-height-sm)`             | -       |
| color/background/ERROR/base-rest   | Semantic   | `var(--dds-color-background-error-base-rest)`   | #D0353F |
| color/text/ERROR/rest              | Semantic   | `var(--dds-color-text-error-rest)`              | #BB2A33 |
| spacing/md                         | Semantic   | `var(--dds-spacing-md)`                         | -       |


To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://vanilla.delldesignsystem.com/?path=/docs/components-progress-bar--docs)
<details data-name='iframe-doc' data-link='https://vanilla.delldesignsystem.com/iframe.html?args=&id=components-progress-bar--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

Code

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://angular.delldesignsystem.com/?path=/docs/components-progress-bar--docs)
<details data-name='iframe-doc' data-link='https://angular.delldesignsystem.com/iframe.html?args=&id=components-progress-bar--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://react.delldesignsystem.com/?path=/docs/components-progress-bar--docs)
<details data-name='iframe-doc' data-link='https://react.delldesignsystem.com/iframe.html?args=&id=components-progress-bar--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

Progress bars are used to convey the duration of system processes, including installation and uploading or downloading files, images, or updates.

Progress Bar