Skeleton

Shimmering placeholder that holds the space of content while it loads.

Overview

The catnip-skeleton component renders a neutral block with a shimmer animation. Use it in place of text, media, or cards whose content is still loading, sized to match the content it stands in for so the layout does not shift when the content arrives.

By default it is one text line tall and fills the available width. Set width, height, and radius as CSS lengths to match other shapes, such as an avatar (radius="50%") or an image.

catnip-graphic uses a skeleton automatically while its artwork loads.

Usage

<catnip-skeleton></catnip-skeleton>
<catnip-skeleton width="60%"></catnip-skeleton>
<catnip-skeleton width="40px" height="40px" radius="50%"></catnip-skeleton>
<catnip-skeleton width="100%" height="160px" radius="var(--catnip-radius-m)"></catnip-skeleton>

Live example

Accessibility

• The skeleton is aria-hidden: it is decorative and never announced.
• Communicate the loading state on the region that is loading, for example aria-busy="true" while placeholders are shown, and a visually hidden "Loading…" status message for longer waits.
• The shimmer stops when the user prefers reduced motion (prefers-reduced-motion: reduce).