Pulse Placeholder

A gentle fade-in-fade-out animation applied to placeholder content, creating a "breathing" effect. Softer and more subtle than shimmer.

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

Twitter/XInstagramFigmaLinear

Prompt Templates

Copy and paste these prompts into your AI coding assistant.

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)

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.