Skeleton — Layered
AI Pass+skeleton#loading#dashboard#chart
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 — Layered
A layered skeleton loading placeholder — a dashboard stat card whose depth layers fade in one after another (header, then the stat line, then the sub-line, then the chart bars left to right) in a continuous loop. Token-driven, design-system agnostic, with dark mode and reduced-motion support.
Features
- Continuous depth-layer reveal — header, stat line, sub-line, then chart bars fade in with staggered delays (transform + opacity only, GPU-composited)
- Dashboard stat layout — header row with a heading line and pill, a large stat line, a sub-line, and an eight-bar chart
- Chart bars stagger left to right within the last layer
- Click or press Enter/Space to replay the load-in animation
- All colors, spacing, and radii driven by design-system tokens (
--skel-line) - Dark/light mode via the
body.darkclass - Prefers-reduced-motion support
- Accessible: role=status, aria-busy, screen-reader loading label
Customise it with AI
Open Skeleton — Layered 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 — Elastic
VanillaReact
An elastic skeleton loading placeholder — profile-card shapes spring in with an overshoot bounce, staggered top to bottom, looping continuously while content loads. Token-driven, design-system agnostic, with dark mode and reduced-motion support.
#skeleton#loading#placeholder
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 — 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 — 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 — 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
