Skip to content
Jewel

Skeleton loader

Gray blocks in the shape of content that’s on its way, with a slow, gentle pulse that stays calm next to the lava lamp animation.

CSS
css/components/skeleton.css

01 — Variants

Lines

A title line, then text lines. --short ends a paragraph.

Block

A block for a chart, image or video. Set its height with --skeleton-h.

A card loading

Skeletons built from the same parts as the real content, so the layout doesn’t jump when it arrives.

02 — Usage

Use it for

  • First loads where you know the layout: cards, tables, details.
  • Waits longer than a moment.

Avoid

  • Quick loads. A flash of gray is worse than nothing.
  • Unknown layouts. Use a .spinner.
  • Swapping parts in one at a time. Replace the whole skeleton at once.

03 — Accessibility

Notes

  • Put aria-busy="true" and an aria-label on the container; screen readers hear the label, not the blocks.
  • Remove aria-busy when the real content arrives.
  • With reduced motion the blocks stop pulsing.