components icon

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 backlogElement is in backlog
React
React
In backlogElement is in backlog
Documentation
In progressElement design and development in progress

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.

Anatomy

The parts of a loading indicator component, labeled 1 through 3.
  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.