Skeleton
No library Beginner
A shimmer content placeholder — avatar, name, and body line shapes with a sweeping highlight. Pure CSS, no dependencies.
A shimmer content placeholder — avatar, name, and body line shapes with a sweeping highlight. Pure CSS, no dependencies.
Goal: Create a "Skeleton" content placeholder with a shimmer animation.
Visual behavior: A mock card layout — circular avatar placeholder (40×40px), two line placeholders beside it, and two full-width line placeholders below. All elements use a muted fill. A highlight sweep moves left-to-right continuously (~1.8s cycle), simulating a light reflection passing over the surface.
Technique: Each skeleton shape is a div with rounded corners and a background gradient: three stops (muted → brighter → muted) with backgroundSize 200% 100%. CSS keyframe animates background-position from 200% to -200% over 1.8s on a linear infinite loop. No opacity animation — only background-position moves.
Accessibility: aria-busy="true" and aria-label="Loading content" on the wrapper. All animations disabled under prefers-reduced-motion.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
Return a single self-contained component. Do not introduce dependencies beyond what I've listed.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.