UI Terms visual dictionary

Patterns

Shimmer

An animated gradient that sweeps across a skeleton placeholder to signal that content is loading.

Where a static skeleton uses flat gray shapes, shimmer adds a moving highlight that travels across them. The motion reassures the user that the app is working rather than frozen. Typically implemented with a CSS linear-gradient and a `background-position` animation.

Also called

shimmer effectanimated skeleton

When to use

  • Loads expected to take more than ~500ms where a static skeleton would feel stuck
  • Feeds and lists where many skeleton items animate together

When not to use

  • Very short loads — the animation appears and disappears too fast to read
  • Anywhere reduced-motion preferences are set (provide a static fallback)

Source

Facebook is widely credited with popularizing the effect around 2017 in its mobile apps.