Skeleton loaders are animated placeholders that represent loading content. They provide a visual indication of where content will appear, reducing perceived wait time and preventing layout shift.
Sizes
Skeletons come in four height sizes matching common content dimensions.
Small (sm) — 8px height. Captions and metadata.
Medium (md) — 16px height. Body text lines.
Large (lg) — 24px height. Headings and buttons.
Extra-large (xl) — 32px height. Cards and hero content.
Levels
Background levels control contrast against the parent surface. Match the skeleton level to the elevation context.
Level 1 — Lightest, for elevated panels.
Level 2 — Default level.
Level 3 — Mid-tone for base surfaces.
Level 4 — Darker, subtle against dark backgrounds.
Level 5 — Strongest, for deepest surfaces.
Composition
Combine multiple skeletons to represent complex content areas like cards, lists, or profiles.
Match the skeleton dimensions to the expected content dimensions for minimal layout shift.
Guidelines
- Use skeletons for content that loads asynchronously and where the layout is predictable.
- Match skeleton shapes to expected content — use short widths for labels, full-width for paragraphs.
- Choose a level that contrasts with the parent surface. Level 5 on dark backgrounds, Level 2 on lighter panels.
- Avoid using skeletons for content that loads instantly. They should only appear for perceptible delays (200ms+).
- Prefer skeletons over spinner loaders when the layout structure is known ahead of time.
Dos and Don'ts
Mirror the expected content layout to minimize layout shift when content loads.
Don't use identical uniform blocks that don't represent the actual content structure.