Design.dev design.dev
UI Component Prompt

Skeleton Loading Screen

CSS-only animated loading placeholders with shimmer gradients, no JavaScript. Copy the prompt, paste it, ship it.

Copy → Paste → Ship

Live Preview

Pure CSS · No JavaScript

Three common skeleton patterns — profile header, card grid, and content list — all animated with a single CSS keyframe. Click the preview to toggle the loaded state.

The Prompt

Build a skeleton loading screen using only HTML and CSS — no JavaScript required for the animation.

VISUAL DESIGN
- Dark background (#0a0a0a) with skeleton elements in a slightly lighter tone (#1a1a1a)
- Animated shimmer: a linear gradient sweep moving left to right across each element
  Gradient stops: transparent, rgba(255,255,255,0.04), rgba(255,255,255,0.08), rgba(255,255,255,0.04), transparent
  Background-size: 200% 100%, animated via background-position from -200% to 200%
  Timing: 1.8s ease-in-out infinite
- Rounded corners: 8px for rectangular shapes, 50% for circular avatars
- No visible borders on skeleton elements — rely on background contrast only

LAYOUT PATTERNS (build all three in one page)

1. Profile Header
   - 56px circular avatar placeholder on the left
   - Two text lines to the right: name line (40% width, 14px tall) and bio line (65% width, 11px tall)
   - 12px vertical gap between lines

2. Card Grid
   - 3-column responsive grid (collapses to 1 column below 640px)
   - Each card: 16:9 aspect-ratio image placeholder on top, then 3 text lines below
   - Text line widths: 100%, 80%, 50% (staggered to look natural)
   - 14px card padding, 12px border-radius
   - Subtle card border: 1px solid rgba(255,255,255,0.06)

3. Content List
   - 4 rows, each with: 40px circular avatar, then two text lines (55% and 35% width)
   - 14px vertical padding per row
   - 1px separator between rows at rgba(255,255,255,0.06)

CSS ARCHITECTURE
- Single @keyframes animation using background-position
- Shared .skeleton class applies the base background color
- Shimmer gradient on a ::after pseudo-element so it doesn't interfere with layout
- Shape modifiers: .skeleton--circle, .skeleton--text, .skeleton--text-sm, .skeleton--image
- CSS custom properties for all colors and timing:
  --skeleton-base, --skeleton-shimmer, --skeleton-speed
- Use these properties so the theme is switchable by changing 2-3 values

ACCESSIBILITY
- prefers-reduced-motion media query that disables the shimmer animation
- aria-hidden="true" on individual skeleton elements
- aria-busy="true" on the skeleton container

OUTPUT
- Single HTML file with embedded <style>
- No JavaScript — animation is pure CSS
- Dark theme default, adaptable to light theme by overriding the custom properties
- Clean, composable class system

Anatomy

01

Shimmer Gradient

Animated linear gradient that sweeps left to right, creating the illusion of content loading in.

02

Placeholder Shapes

Rounded rectangles and circles sized to match your final content — text lines, avatars, images.

03

Aspect Ratios

Proportional sizing on image placeholders that prevents layout shift when real content loads.

04

Color Palette

Subtle base and shimmer tones that read as "loading" without competing with content arrival.

05

CSS Custom Properties

Centralized design tokens for base color, shimmer intensity, and speed — swap themes in two lines.

06

Pseudo-element Layer

Shimmer lives on ::after to avoid interfering with element sizing or layout flow.

07

Animation Timing

Smooth 1.8s ease-in-out loop — fast enough to feel alive, slow enough to avoid distraction.

08

Reduced Motion

prefers-reduced-motion query disables shimmer for users who opt out of animation.

Usage Guidelines

Use This When

  • Content-heavy pages where data arrives asynchronously — feeds, dashboards, profiles
  • You want layout-aware placeholders instead of generic spinners for better perceived performance
  • Pre-rendering page structure to prevent cumulative layout shift on load

Not Ideal When

  • Content loads in under 200ms — skeletons will flash awkwardly before disappearing
  • A progress bar or inline spinner communicates the action more clearly
  • Critical above-the-fold content that should be server-rendered or statically generated
Copied to clipboard