LOADING EFFECT

Shimmer.

A soft sweep passes over placeholder content.

See the movement

Repeats while playing

Duration 1.60s

Playback starts only when you request it. Stop returns to the still illustration.

What it does

A moving highlight can indicate that a skeleton stands in for content that is still arriving. Match the placeholder to the expected content and stop the effect as soon as loading ends.

Timing curvelinear

Default duration1600ms

RepetitionWhile the state is active

Make the motion useful

Choose an effect that supports the component’s purpose. Keep the final state clear, preserve focus and reading order, and pair important feedback with a visible message.

CSS animation reference

TAKE THE MOVEMENT WITH YOU

Describe the effect.

Copy this into your next coding conversation, or pair it with a dictionary component.

Shimmer: A soft sweep passes over placeholder content.
Sweep a low-contrast highlight across skeleton placeholders while content is loading. Keep the skeleton layout stable, hide decorative placeholders from assistive technology, and expose loading status separately.
Timing: 1600ms; easing: linear; repeat only while the relevant state is active.
Accessibility: respect prefers-reduced-motion with a static state or brief opacity-only change, and never rely on motion alone to convey meaning.

Find a component

For reduced motion, use a static state or a brief opacity change. Animation should never be required to understand the component.

See the movement

What it does

Make the motion useful

In the same family

Spin

Progress sweep

Dot wave