LOADING EFFECT

Progress sweep.

A moving segment crosses an indeterminate track.

See the movement

Repeats while playing

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

What it does

An animated segment moving through a track signals ongoing work without claiming a completion percentage. If the app knows progress, replace it with a measured determinate bar.

Timing curvecubic-bezier(.4,0,.2,1)
Default duration1400ms
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