Loading Indicator
Search the component library

Loading Indicator

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

Positioning
  • Vertically and horizontally centered in the viewport or page subset
  • Always on top of contents
Sizing and spacing
  • Chip 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
Colors
Typography
  • UI Text - Basic
Spinner
  • Composed 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
Animation
  • Dots 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 box
  • The 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