Skeleton Loader
A placeholder UI that mimics the layout of loading content, reducing perceived wait time.
Plain English
A skeleton loader is a grey wireframe of the content that is about to appear. Instead of staring at a spinner while a page loads, users see the shape of the content immediately — they know where the heading will be, where the image sits, and where the text goes. This dramatically reduces perceived wait time because the brain processes "things are happening" differently from "nothing is happening." Skeleton loaders are most effective for content-heavy pages like feeds, dashboards, and article lists.
Technical
Implemented with grey placeholder elements matching the content layout, animated with a shimmer effect (a gradient that sweeps left to right, created with a CSS animation on a linear-gradient background). Key technique: background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%) with background-size: 200% + animation: shimmer 1.5s infinite. Match the placeholder sizes closely to actual content — a title placeholder at the right width, an image placeholder at the right aspect ratio.
Live Demo
Skeleton card (loading)
Skeleton list (loading)
Skeleton loaders maintain layout and communicate progress — more effective than a spinner.
Usage
✓ Good usage
A card skeleton with a rectangular placeholder for the image, two lines of text placeholders at different widths, and a shimmer animation — users understand the layout before any content loads.
✗ Bad usage
A spinner centred on the page for content that takes 3+ seconds to load — after 500ms of nothing, users assume something is wrong.
Recommended values
- Background: #E2E8F0 (light grey) with shimmer
- Shimmer speed: 1.2–1.8s linear infinite
- Border radius: match the real content's border radius
- Width: match approximate content width (title ~60%, subtitle ~40%)
- Show skeleton immediately on data fetch, switch to real content on load
Common mistakes
- Skeleton that does not match the actual content layout — content jumping into wrong positions on load.
- Shimmer too fast (distracting) or too slow (feels broken).
- Using skeleton loaders for tiny, fast operations (< 300ms) — spinner is simpler.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Replace all initial data-loading spinners with skeleton screens. Each skeleton matches the content layout: rectangular placeholders for images, line placeholders for text. Apply a shimmer animation (linear-gradient sweep, 1.5s). Match border-radius to real content.