Shimmer Preview

A shimmer lets people know that a section of information is loading without blocking other UI elements from rendering. They’re great for gradually loading layouts and giving hints about the structure of information.

Use shimmers for loading states that take longer than one second but avoid them for long loading processes. They are indeterminate indicators, so they don’t communicate how much time is left before the process is done. Seeing a shimmer for too long could make people think something’s gone wrong.

Resources


Layout

Shimmers should reflect the structure of the content that people will see once it’s fully rendered.


Accessibility

If the Reduce Motion setting is enabled, the shimmer won’t animate. Otherwise, add an animating label while the shimmer is on screen to let people who use VoiceOver know what’s happening.