UX Framework
Loading Indicator
Search the component library

Loading Indicator

v1.0.0
Download UI Kit v1.9.0 Code

Defines the standard visual style for a loading indicator.

Download UI Kit v1.9.0 Code

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

Dependencies

Colors v2.0.0

Typography v2.0.0

Documents

UX Accessibility Checklist

Documentation Assets (Sketch)

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.)

Only one indicator should appear on the page at a time.

There is no visual lightbox effect, however, the user cannot interact with the UI while loading is in process.

Loading indicator should always appear over the content area.

Example of the loading animation.

Redlines

Positioning
  • Vertically and horizontally centered in the viewport
  • 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
Behavior
  • While the spinner is displayed none of the UI behind it should be interactive

Loading indicator redlines.

Spinner detail.

Loading indicator animation.

Changelog

1.0.0

Initial version