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

PublishedElement can be used in production
PublishedElement can be used in production
Angular
Angular
In progressElement design and development in progress
React
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

ComponentUse case
Loading indicatorA 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 barProgress 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 trackerProgress 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

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

Articles

Animation in UX article

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

Progress indicators article

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