Shimmer Effect
A sweeping gradient animation over loading placeholders that implies active data transfer.
Plain English
Shimmer is the animated version of a skeleton screen. A plain grey rectangle is static and ambiguous — it could be broken. A shimmer sweeping left-to-right across that same rectangle communicates "data is flowing right now." The visual metaphor of light moving across a surface implies life and progress. Shimmer is most effective on content-heavy pages like feeds, dashboards, and article lists where the layout is stable but the data is still loading.
Technical
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: shimmer 1.5s linear infinite; @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }. Apply to placeholder elements matching content layout. Use border-radius matching the real content. Dark mode: swap #f0f0f0/#e0e0e0 for #1e293b/#334155.
Live Demo
Static (boring)
Shimmer (active)
Shimmer communicates "data is flowing" — far more reassuring than a static grey placeholder.
Usage
✓ Good usage
A card skeleton with a shimmering image placeholder, two shimmering text lines, and a shimmering tag — users immediately understand layout and loading status.
✗ Bad usage
A shimmer applied to the entire page as one block instead of individual content placeholders — the effect looks like a glitch, not a loading state.
Recommended values
- Speed: 1.2–1.8s linear infinite
- Gradient width: 200% background-size
- Light tone: #f0f0f0 (or #1e293b dark)
- Mid tone: #e0e0e0 (or #334155 dark)
- Match border-radius to real content
- Apply immediately on data fetch — no delay
Common mistakes
- Shimmer speed too fast (< 0.8s) — becomes distracting and feels frantic.
- Not matching placeholder size to content — causes layout shift when real content loads.
- Forgetting dark mode — shimmer greys look like content against dark backgrounds.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Add shimmer loading states to all data-fetched cards. Each card shows a rectangular image placeholder, two text line placeholders (60% and 40% width), and a tag placeholder. Apply a linear-gradient shimmer animation (1.5s linear) to each placeholder. Match border-radius to the loaded content.