LOADING EFFECT

Spin.

A circular indicator rotates at a steady pace.

See the movement

Repeats while playing

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

What it does

Rotation communicates an indeterminate process, not a measured percentage. Pair the spinner with a label and replace it with a result or recovery action when the process finishes.

Timing curvelinear
Default duration1100ms
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