Motion · State
Skeleton Shimmer
A soft highlight sweeps across placeholders while content loads. Fast enough to feel busy, slow enough to stay calm.
Specs#
| Property | background-position |
| Duration | 1.4s per sweep |
| Easing | linear, infinite |
| Swap | crossfade to content, 200ms |
| Built with | CSS only |
Guidelines#
Use for
- First load of cards, lists, profiles
- Content that takes over ~300ms
Avoid
- Shimmer on content that loads instantly
- Skeleton shapes that do not match the real layout