Skeleton

Skeleton holds the place of content that is still loading: flat blocks on the sunken face in the content's shape (a 60 % title bar, a 40 % meta bar, body lines). It never shimmers or loops; it waits like a proof waiting for its ink. Shapes: text, card and row.

Example#

Usage#

Use a skeleton to hold the place of content that is still loading, in its shape: a card, a row, lines of text. It is flat and still: no shimmer, no loop, a proof waiting for its ink.

• Shapes. text (lines), card (media, title and meta) and row (thumb, title and meta).
• Short waits need nothing; a skeleton that flashes for 100 ms is worse than none.
• Unknown waits with no shape to hold are a Loader.

Anatomy#

Volume#

Reading layer: identical at every volume.

• Quiet

  Loading the Fernlight case study

  Loading

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

• Studio

  Loading the Fernlight case study

  Loading

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

• Press

  Loading the Fernlight case study

  Loading

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

• Rave

  Loading the Fernlight case study

  Loading

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

Content#

• Skeletons carry no words. If the wait runs long, a visible line under it says what is loading.

Do and don't#

Accessibility#

• It is a polite status that says its label ("Loading") once; the blocks are hidden from assistive tech.
• No motion of any kind, so nothing changes under reduced motion.
• Under more contrast every block gets a rule, so the shapes stay visible.

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

It prints no text of its own (art layer or layout only), so it has no pair to check.

Props#

Tokens#

Changelog#