Loading
Search the component library

Loading

v1.1.0

Defines the standard visual style for a loading indicator.

Usage Guidelines

Use a loading indicator to show that a page is in the process of loading or an action is being completed.

Features

  • Accessibility compliant
  • Animated loading indicator

Loading Indicator

A loading indicator provides visual feedback to users that they have initiated a process and it holds their attention for processes that take longer than one second.

(Do not use a loading indicator for processes that take less than one second since this may confuse users.)

A single loading indicator can be used at the page level or multiple indicators can be applied to specific components on a page.

Loading indicator should always appear over the content area.

Example of the loading animation.

Positioning

The loading indicator may apply to either the entire page or to just the section that is awaiting a server response.

Example of the loading indicator being used for a single area of the page.

Redlines

PositioningVertically and horizontally centered in the viewport or page subset
Always on top of contents
Sizing and spacingChip is 200px wide and 70px tall
Text and indicator are centered in the chip
12px spacing between icon and text
Text may wrap to multiple lines if needed, should stay vertically centered
Chip has 20px margins that force text to wrap
ColorsBackground Color: Charcoal
Text: White
Spinner: Digital Marine Turquoise
TypographyUI Text - Basic
SpinnerComposed of 8 circles arranged equally around a circle
Each dot is a 4px circle except for the larger dot which is 6px
The spinner fits inside a 30px box
AnimationDots take 0.2s to grow and 0.2s to shrink
The next dot in sequence starts growing as soon as the previous dot starts shrinking
The animation proceeds in a clockwise direction
Light boxThe region of the page the loader applies to should have a White overlay at 80% opacity

Loading indicator redlines.

Spinner detail.

Loading indicator animation.

Changelog

1.1.0

  • ADDED: Overlay effect
  • ADDED: Loading indicator may apply to a subset of the page

1.0.0

Initial version