Back to Dictionary
Waiting & Loading
●○○Ready to Use
Skeleton Wave
Similar to a shimmer loader, but animates a soft gradient wave that sweeps diagonally across multiple skeleton blocks sequentially.
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
FacebookLinkedIn
Prompt Templates
Copy and paste these prompts into your AI coding assistant.
Create a skeleton loader with a wave effect.
Code Example (Tailwind CSS)
export function SkeletonWaveDemo() {}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.