Loader

Loader says that something is on its way: a circle, a triangle and a square in the ink hop in turn (900 ms a cycle, at most five cycles, then still) beside a visible label ("Loading"). The label never moves. art takes the 3D kit's block loader in place of the glyphs.

Example#

Usage#

Use a loader when something is on its way and there is no shape to hold: a search, a render, an upload being processed. Three glyphs hop in turn beside a visible label, for five cycles at most, then stand still.

• The label never moves and is announced politely (role="status").
• art takes the 3D kit's BlockLoader in place of the glyphs, for bigger moments.
• Reduced motion shows the glyphs still.
• Content with a known shape loads behind a Skeleton instead.

Anatomy#

Volume#

Reading layer: identical at every volume.

• Quiet

  Loading

  Sending

  Docs, forms, legal and long reads. Flat inks, no art in motion.

• Studio

  Loading

  Sending

  The site default. Art on its own plates, one display moment per view.

• Press

  Loading

  Sending

  Hero moments, covers and campaigns. Halftone fields and the second ink.

• Rave

  Loading

  Sending

  Launches, posters and the 404. Every ink, and the words still win.

Content#

• Say what is loading: "Rendering the cover", not just "Loading".
• A joke can go beside the loader at louder volumes; the label stays literal.

Do and don't#

Accessibility#

• It is a polite role="status" named by its visible label.
• Reduced motion prints the glyphs still; the label says the same thing either way.
• The hop ends on its own, so it never runs as an endless loop (D-E3).

The colour pairs it prints, with their contrast on both papers:

Props#

Tokens#

Changelog#