Skeleton Wave
Similar to a shimmer loader, but animates a soft gradient wave that sweeps diagonally across multiple skeleton blocks sequentially.
Use
Complex dashboard layouts with many distinct sections loading at once
Avoid
Single line text loads
Safer Alternative
No safer default listed.
Risk Level
Low risk
Live Demo
What It Is
Similar to a shimmer loader, but animates a soft gradient wave that sweeps diagonally across multiple skeleton blocks sequentially.
✓When to Use
- Complex dashboard layouts with many distinct sections loading at once
✕When NOT to Use
- Single line text loads
Configuration Tips
- 01Coordinate the wave animation delay across adjacent elements to make the wave travel continuously
You've Seen It In
AI Implementation Prompts
Move from a fast scaffold to production details, then tune timing and edge states.
Create a skeleton loader with a wave effect.
Reference Implementation
The same implementation approach used by the live preview, kept compact enough to inspect and adapt.
"use client";
import { motion } from 'framer-motion';
export function SkeletonWaveDemo({ isPlaying = false }: { isPlaying?: boolean }) {
return (
<div className="flex h-64 w-full items-center justify-center overflow-hidden rounded-2xl bg-white p-4 shadow-sm ring-1 ring-stone-200">
<div className="w-full max-w-sm flex flex-col gap-4 p-5 rounded-2xl border border-stone-100 shadow-sm bg-white overflow-hidden relative">
{"text-stone-400 italic">/* Content Blocks */}
<div className="flex flex-col gap-3">
<div className="w-full h-32 rounded-xl bg-stone-100 mb-2 relative overflow-hidden">
{isPlaying && (
<motion.div
className="absolute inset-0 bg-gradient-to-r from-transparent via-white/50 to-transparent -skew-x-12 w-[150%]"
initial={{ x: "-100%" }}
animate={{ x: "200%" }}
transition={{ duration: 1.5, repeat: Infinity, ease: "easeInOut", delay: 0 }}
/>
)}
</div>
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-full bg-stone-100 shrink-0 relative overflow-hidden">
{isPlaying && (
<motion.div
className="absolute inset-0 bg-gradient-to-r from-transparent via-white/50 to-transparent -skew-x-12 w-[200%]"
initial={{ x: "-100%" }}
animate={{ x: "200%" }}
transition={{ duration: 1.5, repeat: Infinity, ease: "easeInOut", delay: 0.1 }}
/>
)}
</div>
<div className="flex flex-col gap-2 w-full">
<div className="w-3/4 h-3 rounded-full bg-stone-100 relative overflow-hidden">
{isPlaying && (
<motion.div
className="absolute inset-0 bg-gradient-to-r from-transparent via-white/50 to-transparent -skew-x-12 w-[200%]"
initial={{ x: "-100%" }}
animate={{ x: "200%" }}
transition={{ duration: 1.5, repeat: Infinity, ease: "easeInOut", delay: 0.2 }}
/>
)}
</div>
<div className="w-1/2 h-2.5 rounded-full bg-stone-50 relative overflow-hidden">
{isPlaying && (
<motion.div
className="absolute inset-0 bg-gradient-to-r from-transparent via-white/50 to-transparent -skew-x-12 w-[200%]"
initial={{ x: "-100%" }}
animate={{ x: "200%" }}
transition={{ duration: 1.5, repeat: Infinity, ease: "easeInOut", delay: 0.3 }}
/>
)}
</div>
</div>
</div>
</div>
</div>
</div>
);
}Related Effects
Skeleton Screen
A placeholder UI that mimics the shape and layout of your actual content before it loads. Shows gray blocks where text, images, and UI elements will appear, reducing perceived waiting time.
Shimmer / Sweep Loader
An animated highlight that sweeps horizontally across placeholder content, creating the illusion of activity and reducing perceived wait time. Often combined with skeleton screens.