xpert-ai 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
- Copy
loading-shimmer.cssand link it. - Add
data-skeletonto placeholder blocks (give each a width/height). - Remove the placeholders (or the attribute) the moment real content arrives.
Accessibility & performance
prefers-reduced-motion: static skeleton, no sweep. The sweep usestransformonly (GPU-safe).