Pulse Placeholder
A gentle fade-in-fade-out animation applied to placeholder content, creating a "breathing" effect. Softer and more subtle than shimmer.
Use
Loading states where shimmer feels too aggressive
Avoid
When you need to convey percentage progress
Safer Alternative
No safer default listed.
Risk Level
Low risk
Live Demo
What It Is
A gentle fade-in-fade-out animation applied to placeholder content, creating a "breathing" effect. Softer and more subtle than shimmer.
✓When to Use
- Loading states where shimmer feels too aggressive
- Image placeholders before the real image loads
- Empty avatar circles in user lists during fetch
- Minimalist designs where subtlety is key
✕When NOT to Use
- When you need to convey percentage progress
- Very short loads under 500ms (pulse cycle may not complete)
- Contexts where skeleton or shimmer provides better layout context
You've Seen It In
AI Implementation Prompts
Move from a fast scaffold to production details, then tune timing and edge states.
Create pulsing placeholders for images or text blocks. They should gently fade in and out with a breathing effect while loading.
Code Example (Tailwind CSS)
A focused implementation sketch you can adapt to your product state.
export function PulsePlaceholder({
shape = 'rectangle',
className = ''
}: {
shape?: 'circle' | 'square' | 'rectangle';
className?: string;
}) {
const shapes = {
circle: 'rounded-full aspect-square',
square: 'rounded-lg aspect-square',
rectangle: 'rounded-lg',
};
return (
<div
className={`animate-pulse-slow bg-zinc-800 ${shapes[shape]} ${className}`}
aria-label="Loading content"
/>
);
}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.
Blur Fade-in
Content fades in while simultaneously transitioning from blurred to sharp focus, creating a cinematic reveal effect. More sophisticated than a simple fade.