Placeholders

  1. Base UI
  2. Placeholders

Article preview

A cover, headline, and summary while content is loading.

Glow animation

A gentle opacity pulse for supporting content.

Placeholder sizes

Use the same scale as the content you are loading.

Wave animation

A sweeping effect for a distinct loading treatment.

Metric summaries

Reserve space for values before the numbers arrive.

List loading

Consistent row heights keep a changing list stable.

Form loading

A quiet form outline before fields become available.

Table skeleton

Reserve column widths and row spacing during loading.

Theme accents

Semantic colors with smaller areas of emphasis.

Live loading preview

Switch between a skeleton and its finished content.

Ready

Atlas workspace

Your project details are ready. Keep the next milestone in focus.

View tasks

Skeleton preview is visible.

Widths & proportions

Vary line lengths to resemble realistic content.

Media skeleton

Match the proportions of a video and its supporting details.