Back to Dictionary
Waiting & Loading
●●○Customize

Skeleton Screen

Choose skeletons when layout context matters more than showing generic activity.

Timing

Best for waits around 700ms to 3s; fade out in 250-400ms when real content appears.

Easing

Use linear shimmer motion, then ease-out for the content handoff.

Risk

feels slowaccessibility sensitive

Live Demo

What It Is

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.

Decision Guidance

Choose skeletons when layout context matters more than showing generic activity.

Best For

Loading predictable card, feed, table, or dashboard layouts where users benefit from seeing the shape of incoming content.

Avoid When

Avoid for instant fetches, unknown layouts, or states that might fail instead of resolving to real content.

Timing

Best for waits around 700ms to 3s; fade out in 250-400ms when real content appears.

Easing

Use linear shimmer motion, then ease-out for the content handoff.

Risk Tags

feels slowaccessibility sensitive

Alternatives

Spinner / Loading CircleProgress BarPulse Placeholder

✓When to Use

  • Loading content that takes 1-3 seconds (longer than a spinner feels appropriate)
  • Dashboard cards, social feeds, or list views where layout is predictable
  • First-time app loads where users need context about what's coming
  • Mobile apps where network speed varies significantly

✕When NOT to Use

  • Instant data fetches under 300ms (unnecessary visual noise)
  • Unpredictable layouts where skeleton won't match real content
  • Error states (skeleton implies success is coming)

Configuration Tips

  • 01Match skeleton block dimensions to your actual content layout for seamless transition
  • 02Adjust shimmer opacity and speed to match your design system (lighter themes need higher opacity)
  • 03Use CSS custom properties for colors so skeleton adapts to light/dark mode automatically
  • 04Time the fade-out animation (300-400ms) to coincide with content fade-in for smooth handoff

You've Seen It In

LinkedInFacebookYouTubeNotion

Prompt Templates

Copy and paste these prompts into your AI coding assistant.

Add a skeleton loading animation to my card. Show gray placeholder blocks for avatar, name, and text lines. Include a subtle shimmer effect that sweeps across.

Code Example (Tailwind CSS)

export function SkeletonCard() {
  return (
    <div className="relative overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900 p-6">
      {"text-stone-400 italic">/* Avatar */}
      <div className="h-16 w-16 rounded-full bg-zinc-800" />
      
      {"text-stone-400 italic">/* Name */}
      <div className="mt-4 h-6 w-32 rounded bg-zinc-800" />
      
      {"text-stone-400 italic">/* Bio lines */}
      <div className="mt-3 space-y-2">
        <div className="h-4 w-full rounded bg-zinc-800" />
        <div className="h-4 w-4/5 rounded bg-zinc-800" />
      </div>
      
      {"text-stone-400 italic">/* Buttons */}
      <div className="mt-6 flex gap-3">
        <div className="h-10 w-24 rounded bg-zinc-800" />
        <div className="h-10 w-24 rounded bg-zinc-800" />
      </div>
      
      {"text-stone-400 italic">/* Shimmer overlay */}
      <div className="absolute inset-0 -translate-x-full animate-shimmer bg-gradient-to-r from-transparent via-white/5 to-transparent" />
    </div>
  );
}

Related Effects

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.

Pulse Placeholder

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

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.