Skeleton

Features

• Content placeholder shapes — a round avatar, two text lines, and a media block
• Shimmer sweep painted by a ::after overlay that animates only transform: translateX
• Slate diagonal-wash background layer built from a single color-mix gradient
• Placeholder shapes rendered from JavaScript into a live role="status" card
• Shimmer pauses automatically while the tab is hidden to save cycles
• Responsive card that fills the available width at the mobile breakpoint
• Fully respects prefers-reduced-motion

Accessibility

Loading role

role="status" with aria-label="Loading" on the skeleton stage

Announced text

A visually-hidden Loading span inside the status region gives assistive tech announceable content

Decorative shapes

The placeholder group is marked aria-hidden="true" so the textless shapes are not exposed

Decorative wash

Background wash layer marked aria-hidden="true"

Focus indicators

:focus-visible with --ring outline via base styles

Reduced motion

prefers-reduced-motion: reduce disables all animations

Customise it with AI

Open Skeleton in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the loader is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.