Skeleton — Staggered
AI Pass+skeleton#loading#notification#placeholder
design.md
Preview
1280 px
AI Assistant
Grab the code for this component with a free account
Every free component’s full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.
Code
Grab the code for this component with free account
Every free component's full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.
Skeleton component
About Skeleton — Staggered
A staggered skeleton loading placeholder — a notification feed whose rows reveal top-to-down in sequence, looping continuously. Token-driven, design-system agnostic, with dark mode and reduced-motion support.
Features
- Sequential top-down reveal — each row fades and lifts in via a staggered animation-delay, looping infinitely
- Notification-feed layout — circle avatar, two varied-width text lines, and a trailing status pill per row
- Faint per-row dividers (border-bottom) using the skeleton line token; last row divider-free
- Click or press Enter/Space to replay the load-in animation
- All colors, spacing, and radii driven by design-system tokens (
--skel-line,--skel-peak) - Dark/light mode via the
body.darkclass - Prefers-reduced-motion support — rows stay visible when motion is reduced
- Accessible: role=status, aria-busy, screen-reader loading label
Customise it with AI
Open Skeleton — Staggered in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the skeleton 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.
Explore Other Components
View all
Skeleton — Cascade
VanillaReact
A cascade skeleton loading placeholder — a highlight wave sweeps thumb by thumb across a media grid while content loads. Token-driven, design-system agnostic, with dark mode and reduced-motion support.
#skeleton#loading#wave
Skeleton — Typewriter
ReactVanilla
A typewriter skeleton loading placeholder — code lines fill in left to right, character by character, across a code-block card while content loads. Token-driven, design-system agnostic, with dark mode and reduced-motion support.
#skeleton#loading#placeholder
Skeleton — Outline
VanillaReact
An outline skeleton loading placeholder — wireframe shapes fill in one after another across an article card while content loads. Token-driven, design-system agnostic, with dark mode and reduced-motion support.
#skeleton#loading#outline
Skeleton — Pulse
VanillaReact
A pulse skeleton loading placeholder — a list feed of thumbnail rows gently fades its opacity in a soft staggered wave while content loads. Token-driven, design-system agnostic, with dark mode and reduced-motion support.
#skeleton#loading#pulse
Skeleton — Shimmer
VanillaReact
A shimmer skeleton loading placeholder — a highlight band sweeps left to right across a social-post card while content loads. Token-driven, design-system agnostic, with dark mode and reduced-motion support.
#skeleton#loading#placeholder
Skeleton — Gradient
VanillaReact
A gradient skeleton loading placeholder — a multi-color gradient shifts across a product card while content loads. Token-driven, design-system agnostic, with dark mode and reduced-motion support.
#skeleton#loading#gradient
Ready to build?
300+ production-ready components and Atheros AI models. Every paid plan includes access to the whole Atheros — AI Builder and Learning.
Starting at $9.9 per month, billed annually
