Default Variant
Progress bars are used to visually show the progression of a system operation such as downloading, uploading, processing, etc. By default, progress bars have a contrast fill that shows the progress.
Data Display
Progress Bar
Progress bars show the progression of a system operation: downloading, uploading, processing, etc., in a visual way. They can represent either determinate or indeterminate progress.
Examples
Options
Primary
By default, progress bars are not emphasized. This is optimal for when the progress bar is not the core part of an interface, such as in application panels, where all visual components are monochrome in order to direct focus to the content. The Primary, or emphasized, progress bar provides a visual prominence that is optimal for forms, settings, lists or grids of assets, and other situations where a progtress bar needs to be noticed.
Static Color Variant
When a progress bar needs to be placed on top of a colored background, use the static variant. This progress bar uses a static white color regardless of the color theme. Make sure the background offers enough contrast for the progress bar to be legible.
Label
Progress bars should have a label that gives context about the operation being performed. An ellipsis is added at the end of the label text to communicate that the process is in progress. In rare cases where context is sufficient and the UX Team have reviewed the design, the label could be undefined. These progress bars should still include an aria-label in HTML (depending on the context, “aria-label” or “aria-labelledby” or "aria-describedby"). The label is always placed above the track.
Value, Min Value, Max Value
The value is the progress of a system operation (e.g., downloading, uploading, processing) within the progress bar’s range, from the min value to max value. The min and max values can also can be customized appropriately for whatever the progress bar is showing. By default, the min value starts at 0 and the max value is set to 100. These values are not applicable when a progress bar is indeterminate.
Value Label
Progress bars can have a value label that gives detailed information about the progress (e.g. "60%" or "2 of 8"). This value label works alongside the label and should not be displayed if the label itself is not displayed. It should also not be displayed if the progress is indeterminate. Similar to the label, the value label is always placed above the track.
Width
The width of a progress bar can be customized appropriately for its context.
Size
Progress bars come in three different sizes: small, medium, and large. The medium size is the default and most frequently used option. Use the other sizes sparingly; they should be used to create a hierarchy of importance within the page.
Indeterminate
A progress bar can be either determinate or indeterminate. By default, progress bars are determinate. Use a determinate progress bar when progress can be calculated against a specific goal (e.g., downloading a file of a known size). Use an indeterminate progress bar when progress is happening but the time or effort to completion can’t be determined (e.g., attempting to reconnect to a server).
Behaviors
Text Overflow
When the label is too long for the available horizontal space, it wraps to form another line. The value is always shown in full and never wraps or truncates.
Implementation
Example Name
Description and implementation notes
<p> code example </p>Information
Checklist
All interactive states
Includes all interactive states that are applicable (hover, down, focus, keyboard disabled).
All Color Schemes
Works properly across all color schemes (light, dark).
Accessible Contrast for Text
Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.0 1.4.3).
Accessible Contrast for UI Components
Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.1 1.4.11).
Defined Options
Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc).
Defined Behaviors
Includes guidelines for keyboard focus, layout(wrapping, truncation, overflow) animation, interactions etc.
Usage guidelines
Includes a list of dos and don'ts that highlight best practices and common mistakes.
Writing Guidelines
Includes content standards or usage guidelines for how to write or format in-product content for the component.
Internationalization Guidelines
Works properly across various locales and includes guidelines for bi-directionality (RTL).
Keyboard Interactions
Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.
Design Tokens
All design attributes (color, typography, layout, animation, etc.) are available as design tokens.
UI Kit
Includes a downloadable Figma file that shows multiple options, states, color themes, and platform scales.