Skip to content

ProgressBar

A ProgressBar is a visual element used to indicate the progress of an action or process.

Guidelines

When to use progress bars

Use a ProgressBar when you want to provide real-time feedback on the progress of ongoing operations, such as file uploads or form submissions.

If the progress of a task is not crucial to user understanding or if the task is expected to complete quickly, avoid using a ProgressBar.

Specifications

Specification of ProgressBar.

Progress bars include the following elements:

  1. Progress bar
    Visual representation of the progress displayed as a filled blue bar.
  2. Bar container
    White container that holds the progress bar.

Types

There are different types of progress bars, depending on your intended use.

Default progress bar

Elevated progress bar to indicate that the ongoing system process will affect an entire view or page area.

ProgressBar displayed on top of a Wikipedia article page.

Inline progress bar

An inline and smaller version of the progress bar is available to indicate progress within other components, such as Menu or Dialog.

Inline ProgressBar displayed within a dialog.

Interaction states

Indeterminate progress bars are always in motion and cannot be in an empty, completed, or disabled state.

Active state of the indeterminate ProgressBar in constant motion.

Demos

Configurable

NameValue
Props
inline
aria-label
disabled
View
Reading direction

Default

Default indeterminate progress bar.

WARNING

Due to the lack of descriptive text, default progress bars require one of the following attributes: aria-label or aria-hidden.

The attribute aria-label has to be used on progress bars to be understandable by assistive technology users. Exceptions are inline progress bars in component combinations, e.g. in the Menu component, that are skipped by adding aria-hidden.

Inline

An inline version is available for use within other components. See Menu for sample usage.

Vue usage

Props

Prop nameDescriptionTypeDefault
inlineWhether this is the smaller, inline variant.booleanfalse
disabledWhether the progress bar is disabled.booleanfalse

CSS-only version

Markup structure

Inline

For an inline progress bar, add the cdx-progress-bar--inline class to the root <div>.

Disabled

For a disabled progress bar, add the cdx-progress-bar--disabled class to the root <div>.