When to Use
Example: product shelf loading state
- Replacing content while data is loading
- Reducing perceived wait time with visual placeholders
- Maintaining layout stability during async operations
Usage Guidelines
DO
Match skeleton shapes to the actual content layout. Use shimmer animation for general loading
Don’t
Don't mix animation modes within the same loading state. Don't use Skeleton for static design previews (use none animation instead)
Accessibility
- Renders a
<div role="status" aria-busy="true">— screen readers announce this as a live region - A visually hidden
<span className="sr-only">Loading…</span>provides text for assistive technology - The shimmer overlay is
aria-hidden="true"— purely decorative - Respects
prefers-reduced-motionvia the global CSS guard