<h2>When to use</h2>
<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>
<details data-name='image-block' data-images='[{"alt":"5 parts of a progress bar.","caption":"A progress bar is composed of, at most, five elements:\n\n1. **Label (optional):** concise description of the process that the progress bar refers to. The label can be visually hidden, but must be defined for accessibility.\n2. **Helper text (optional):** assistive or contextual information about the process taking place. Unavailable when using start placement.\n3. **Bar:** used to show how much the process has progressed for the determinate kind. Indeterminate bars are a fixed size and loop continuously.\n4. **Track:** the area that the bar fills or moves across.\n5. **Value:** a determinate progress bar will show a percentage, fraction, or number to indicate progress.","url":"https://dds.dell.com/site/production/34/54/Progress_Bar_Anatomy_ce82da8afc.png"}]' data-numberofcolumns='1'></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'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

angular

Angular

react

React

## Usage

Use progress bars to give users insight on how long processes will take when you can provide an estimate.

### System processes

For downloading actions, provide an estimated time remaining when possible. For example, if the file size is known, a value or percent completion can be shown based on how much of the file is downloaded.

For uploading actions, real-time progress may or may not be available depending on what information is provided to the system regarding the file. Use the file name and extension as the label when uploading files or images (review related information on file input).

<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/production/5e/ce/Progress_Bar_Usage_1d5a5ab607.png"}]' data-numberofcolumns='1'></details>

You can embed progress bars within [tables](/components/table/) when showing a high-level view of updates or installation. While the header serves as a group label for the progress bars within the column, the value is always required for each determinate progress bar.

<details data-name='image-block' data-images='[{"alt":"Example of using progress bars within a table to show update statuses.","caption":"A start text placement is available for use in compact spaces where vertical space is limited, such as table rows.","url":"https://dds.dell.com/site/production/5e/ce/Progress_Bar_Usage_5784b09e99.png"}]' data-numberofcolumns='1'></details>

Use an indeterminate progress bar when you are unable to quantify progress. If the wait time can be shown but the system needs time to calculate a value, use an indeterminate progress bar to indicate that the requested operation will begin soon. 

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":"You can add more information using helper text below the progress bar.","url":"https://dds.dell.com/site/production/14/a3/Progress_Bar_Usage_1_22d55a772f.png"}]' data-numberofcolumns='1'></details>

## Kinds

Progress bars can be determinate or indeterminate. 

When you are able to calculate the percent completion, use a determinate progress bar. 

Use an indeterminate progress bar when you are unable to calculate the wait time.

<details data-name='image-block' data-images='[{"alt":"Progress bar showing label, helper text, and value.","caption":"Determinate progress bars fill across the track as their percent completion increases from 0% to 100%. A value is required.","url":"https://dds.dell.com/site/production/b2/98/Progress_Bar_Determinate_bbf59b10e0.png"},{"alt":"Indeterminate progress bar showing label and helper text.","caption":"Indeterminate progress bars show a fixed bar moving along the track until the process is complete or until an estimated wait time is known.","url":"https://dds.dell.com/site/production/ee/f6/Progress_Bar_Indeterminate_dfcbcb22d1.png"}]' data-numberofcolumns='2'></details>

### Options

Use concise labels to describe the operation when possible. For determinate progress bars, a value is required.

<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/production/7e/19/Progress_Bar_Options_ab857bd1d9.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/production/35/e8/Progress_Bar_Options_1_43cbb9cace.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/production/1b/87/Progress_Bar_Options_2_6bcff6ee08.png"}]' data-numberofcolumns='3'></details>

## Sizes

Progress bars come in three sizes: large (default), medium, and small. When using multiple progress bars, they should match in size and match 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/production/52/36/Progress_Bar_Size_Large_0fb994722f.png"},{"alt":"Medium determinate progress bar with label, helper text, and percentage.","caption":"","url":"https://dds.dell.com/site/production/c6/63/Progress_Bar_Size_Medium_a2e9f8dd83.png"},{"alt":"Small determinate progress bar with label, helper text, and percentage.","caption":"","url":"https://dds.dell.com/site/production/5c/ae/Progress_Bar_Size_Small_ad495ed4b9.png"}]' data-numberofcolumns='3'></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](/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/production/a9/89/Progress_Bar_Specifications_2_65fc19e085.png"},{"alt":"An image showing stacked progress bars with 20 pixels of padding. ","caption":"A stack of medium progress bars with 16 pixels of padding.","url":"https://dds.dell.com/site/production/44/01/Progress_Bar_Specifications_1_38ce3a403a.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/production/16/23/Progress_Bar_Specifications_608c4a1b8e.png"}]' data-numberofcolumns='3'></details>

## Interaction

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

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

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://vanilla.delldesignsystem.com/?path=/docs/components-progress-bar--determinate)

<details data-name='iframe-doc' data-link='https://vanilla.delldesignsystem.com/iframe.html?args=&id=components-progress-bar--determinate&viewMode=docs&websiteFrame=true'></details>

Code

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://angular.delldesignsystem.com/index.html?path=/docs/components-progress-bar--basic)

<details data-name='iframe-doc' data-link='https://angular.delldesignsystem.com/iframe.html?id=components-progress-bar--docs&args=&viewMode=docs&websiteFrame=true'></details>

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://react.delldesignsystem.com/index.html?path=/story/components-progress-bar--basic)

<details data-name='iframe-doc' data-link='https://react.delldesignsystem.com/iframe.html?args=&id=components-progress-bar--docs&viewMode=docs&websiteFrame=true'></details>

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

Progress Bar

<p>AI Chat Toolkit has moved! You can now find it under the AI section.</p>


AI Chat Toolkit Redirect

<p>The DDS Feedback Form has been updated to point to Service Now (the new official intake form). Please <a href="/resources/videos/servicenow-overview">review this video</a> to learn more about how to interact with our team. Although the tool and process changed, our team expects to continue providing the same support as before.</p>
