Shimmer / Sweep Loader

Use shimmer as an enhancer to skeletons, not as the whole loading strategy.

Timing

A 1.5-2.5s sweep usually feels calm; faster cycles can make loading feel urgent.

Easing

Linear or very soft ease-in-out sweeps work best because the motion is decorative and continuous.

Risk

accessibility sensitiveoverdesigned

Live Demo

What It Is

An animated highlight that sweeps horizontally across placeholder content, creating the illusion of activity and reducing perceived wait time. Often combined with skeleton screens.

Decision Guidance

Use shimmer as an enhancer to skeletons, not as the whole loading strategy.

Best For

Making an existing placeholder feel alive during medium-length content loading.

Avoid When

Avoid if the placeholder is tiny, the load is instant, or the interface already has many looping animations.

Timing

A 1.5-2.5s sweep usually feels calm; faster cycles can make loading feel urgent.

Easing

Linear or very soft ease-in-out sweeps work best because the motion is decorative and continuous.

Risk Tags

accessibility sensitiveoverdesigned

Alternatives

Skeleton Screen Pulse Placeholder Indeterminate Progress Bar

✓When to Use

Enhancing skeleton screens to show the system is working
Loading states longer than 1 second where a static placeholder feels dead
Card layouts, list items, or table rows during data fetch
When you want to indicate "processing" rather than "broken"

✕When NOT to Use

Very fast loads under 500ms (shimmer may not complete a full cycle)
When the content area is extremely narrow (shimmer won't be visible)
Accessibility-critical contexts where animation might cause issues

Configuration Tips

01Adjust shimmer gradient opacity (via-white/10 to via-white/20) to ensure visibility against your background color
02Fine-tune animation duration (1.5-2.5s) - faster feels urgent, slower feels relaxed
03Use CSS easing functions (ease-out or ease-in-out) for more natural motion
04Consider respecting prefers-reduced-motion media query for accessibility

You've Seen It In

FacebookLinkedInMediumSlack

Prompt Templates

Copy and paste these prompts into your AI coding assistant.

Add a shimmer loading effect. Create an animated highlight that sweeps left to right across the content while loading.

Code Example (Tailwind CSS)

export function ShimmerLoader({ children, isLoading }: { children: React.ReactNode; isLoading: boolean }) {
  if (!isLoading) return <>{children}</>;
  
  return (
    <div className="relative overflow-hidden rounded-lg bg-zinc-900 p-6">
      {"text-stone-400 italic">/* Content skeleton */}
      <div className="space-y-3">
        <div className="h-4 w-3/4 rounded bg-zinc-800" />
        <div className="h-4 w-full rounded bg-zinc-800" />
        <div className="h-4 w-5/6 rounded bg-zinc-800" />
      </div>
      
      {"text-stone-400 italic">/* Shimmer animation */}
      <div className="absolute inset-0 -translate-x-full animate-shimmer bg-gradient-to-r from-transparent via-white/10 to-transparent" />
    </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.

Pulse Placeholder

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

Staggered Item Load

List items or grid cards appear one after another with a small delay between each, creating a cascading reveal effect. Adds rhythm and polish to content-heavy pages.