Progress Bar

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

Status

Figma UI Kit	PublishedElement can be used in production
Vanilla	PublishedElement can be used in production
Angular	In backlogElement is in backlog
React	In backlogElement is in backlog
Documentation	PublishedElement can be used in production

What's new

Progress bar was previously named “Standard Progress Indicator with Percentage” and was featured in the “Progress Indicators" section of DDS v1. This component has been redesigned to the updated font ramp and color palette, in addition to accessibility enhancements. There are two kinds of progress bar, determinate and indeterminate, with the prior showing percent completion. Each kind has a distinct animation and usage guidelines.

When to use

Component	Use case
Progress bar	Progress indicator 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.
Progress tracker	Progress trackers display the user’s location within a multistep process while providing the status of each step. In these cases, progress is user-initiated.
Loading indicator	A loading indicator is a visual animation used to convey processing or loading, but does not indicate how long the activity will take to complete.

Anatomy

5 parts of a progress bar. — A progress bar is composed of, at most, five elements:

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

**Helper text (optional):** assistive or contextual information about the process taking place. Unavailable when using start placement.

**Bar:** used to how how much the process has progressed for the determinate kind. Indeterminate bars are a fixed size and loop continuously.

**Track:** the area that the bar fills or moves across.

**Value:** a determinate progress bar will show a percentage, fraction, or number to indicate progress.

Usage

Use progress bars to give users insight on how long processes will take in cases where you are able to provide an estimate.

System processes

For downloading actions, it’s usually possible to provide an estimated time remaining. 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).

An example uploading a file, showing 75% completion. — Progress bar labels can be used to show file names and extensions of uploaded files.

You can embed progress bars within tables 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.

Example of using progress bars within a table to show update statuses. — A start text placement is available for use in compact spaces where vertical space is limited, such as table rows.

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, you can use an indeterminate progress bar as a feedback method 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.

An indeterminate progress bar switching to a determinate version once time to completion is calculated. — You can add more information using helper text below the progress bar.

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.

Progress bar showing label, helper text, and value. — Determinate progress bars fill across the track as their percent completion increases from 0% to 100%. A value is required.

Indeterminate progress bar showing label and helper text. — Indeterminate progress bars show a fixed bar moving along the track until the process is complete or until an estimated wait time is known.

Options

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

Determinate progress bar with label, helper text, and value. — **With label and value:** For determinate progress bars, provide a label that concisely describes the operation.

Determinate progress bar with helper text and value. — **With value:** A value is required for determinate progress bars.

Indeterminate progress bar without label or helper text. — **Without label or value:** An indeterminate progress bar can be shown without a label.

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.

Large, determinate progress bar with label, helper text, and percentage.

Medium determinate progress bar with label, helper text, and percentage.

Small determinate progress bar with label, helper text, and percentage.

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 on the grid foundations page). Specified margins for each progress bar size are shown below. All units of measurement are in pixels.

An image showing stacked progress bars with 20 pixels of padding. — A stack of large progress bars with 20 pixels of padding.

An image showing stacked progress bars with 12 pixels of padding. — A stack of small progress bars with 12 pixels of padding.

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.1: 1.4.3 Contrast (Minimum), 1.4.11 Non-text Contrast (w3.org)

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.1: 3.2.4 Consistent Identification (w3.org)

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

Live demo

This demo lets you interact with the component and view the code. To see other interactive examples of this component or for additional developer documentation, visit Storybook.

You are now entering a live demo of the component.

<div id="progress-182448997" class="dds__progress-bar" tabindex="0" data-dds="progress-bar">
  <label class="dds__progress-bar__label">Progression</label>
  <div class="dds__progress-bar__indicator" title="Progress bar title" role="progressbar" aria-describedby="Progression"></div>
  <span class="dds__progress-bar__helper-text">Helper text</span>
</div>

Copy code

View the progress bar demo and code in Vanilla.

Visit Storybook

Progress Bar

Status

Contents

What's new

When to use

Anatomy

Contents

Contents

Usage

System processes

Kinds

Options

Sizes

Layout

Specifications

Interaction

Animation

Standards

Accessibility

Content

Contents

Contents

Live demo

You are now entering a live demo of the component.

Vanilla

Contents

Progress Bar

Status

Contents

What's newCopy link to this section

When to useCopy link to this section

AnatomyCopy link to this section

Contents

What's new

When to use

Anatomy