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.

Status

Figma UI Kit	PublishedElement can be used in production
Vanilla	PublishedElement can be used in production
Angular	In progressElement design and development in progress
React	In backlogElement is in backlog
Documentation	PublishedElement can be used in production

What's new

Loading indicator was previously named “Standard Loading Indicator” and was featured in the “Progress Indicators” section of DDS v1. This component has been visually redesigned as a circle and includes updates to the font ramp and color palette, in addition to accessibility enhancements.

When to use

Component	Use case
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.
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.

Anatomy

Animated spinner: spinning animation along the circuit, represented by a quarter of a circle.
Circuit ring: circle that is used to set boundaries for the animated spinner to travel clockwise.
Label: optional text to describe the action. It is recommended to limit the label to one word.

Articles

Read the Nielsen Norman Group's article on animation purpose.

Read the Nielsen Norman Group's article on loading indicator.

Usage

Use a loading indicator to proactively communicate that the system is working on the user’s request when the progress isn’t detectable, or if it’s not necessary to indicate how long an activity will take. Animation in the loading indicator consists of a spinner that rotates clockwise indefinitely around the circle ring. Combining text with the animation can optimize visual understanding.

Global

Use a loading indicator when loading a new page or when committing a global action. If the on-page content is visible behind the loading indicator, pair it with an overlay to prevent users from interacting with on-page elements.

Contextual

Contextual loading indicators give visual feedback that an in-page experience or component is responding to user action, such as pressing a button or populating data sets within tables. The style varies visually from the global type in that a box is not required and an overlay is not intended for contextual use cases. Note that components housing the loading indicator do not flex or expand to accommodate the animation and optional label.

Use a loading indicator within a button to inform the user that the system is performing the intended action after a button is pressed. In addition to providing visual feedback, replacing the button with a loading indicator can prevent the user from unintentionally duplicating the action. Once the action is completed, the button should return to its rest state or change to an inactive state if the action cannot be taken twice. Additionally, provide immediate confirmation of the success or failure of the action once it’s completed.

Kinds

Options

Loading indicators include two optional modifiers: a label and without a label.

With label: the label can appear to the left, right, top, or bottom of the animation. Bottom is the default label placement.

Without label: only intended for use in contextual experiences, such as small cards or buttons, where a label may not fit. It is recommended that you provide a label when possible.

Sizes

Loading indicators come in extra large, large, medium, and small sizes. Consider the experience or in-page area when selecting a size. For example, extra large loading indicators are intended for global or page-wide use cases, while large loading indicators can pair with an embedded form or table. A medium loading indicator can be used with most components, while small is intended for compact spaces. Do not stack loading indicators or combine them in close proximity with each other.

Loading indicator sizes in descending order: extra large, large, medium, and small.

Size	Use case
Extra large (default)	The default size of the loading indicator, used for global or page-wide use cases in all viewports.
Large	The large size is intended to show loading or feedback within larger, in-page components and experiences, such as tables or filters.
Medium	The medium size can be used with most components and within large buttons.
Small	It is recommended that you use the small size within compact spaces, such as medium and small buttons.

Interaction

Animation

Animation in the loading indicator consists of a spinner that rotates clockwise around the circle ring. The spinner is displayed as a quarter circle that sits on top of the circle ring, but does not grow to show progress. This component includes animation for prototyping in Figma.

Standards

Accessibility

Ensure each loading indicator 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 loading a large area or full page of content
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 loading functionality 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

Content

Use a clear and concise label
The loading indicator’s label should be short, meaningful, and accurate to the pending action. Avoid using jargons. Technical language should be similarly avoided unless it’s absolutely critical to the understanding of the intended audience.
Do: Loading
Don’t: Page loading

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 class="dds__loading-indicator">
  <div class="dds__sr-only">Label</div>
  <div class="dds__loading-indicator__spinner"></div>
</div>

Copy code

View the loading indicator demo and code in Vanilla.

Loading Indicator

Status

Contents

What's new

When to use

Anatomy

Articles

Animation in UX article

Progress indicators article

Contents

Contents

Usage

Global

Contextual

Kinds

Options

Sizes

Interaction

Animation

Standards

Accessibility

Content

Contents

Contents

Live demo

You are now entering a live demo of the component.

Vanilla

Contents

Loading Indicator

Status

Contents

What's newCopy link to this section

When to useCopy link to this section

AnatomyCopy link to this section

ArticlesCopy link to this section

Animation in UX article

Progress indicators article

Contents

Vanilla

What's new

When to use

Anatomy

Articles