loading-shimmer

loading-shimmer

Skeleton placeholders with a soft sweeping highlight. Part of motion-anything; obeys MOTION-SPEC.md.

When to use it

• Placeholders for content still loading (cards, lists, profiles, media). Improves perceived performance.

When NOT to use it (restraint)

• Loads under ~300ms (a skeleton flash is worse than nothing). Never as pure decoration.

How to apply

1. Copy loading-shimmer.css and link it.
2. Add data-skeleton to placeholder blocks (give each a width/height).
3. Remove the placeholders (or the attribute) the moment real content arrives.

Accessibility & performance

• prefers-reduced-motion: static skeleton, no sweep. The sweep uses transform only (GPU-safe).