Skip to content
All effectsAvatar

Orbit Ring

Two dashed rings turning at different speeds in opposite directions, each carrying a dot. Rotation on the ring, not on the dot.

Pure CSSAvatarPro

Usage

Meant for

Avatar GroupSpinnerAgent Status

Examples

On a Avatar

Two dashed rings turning at different speeds in opposite directions, each carrying a marker. The rotation is on the ring, not on the dot — that is what keeps the marker upright. Only the first two children turn, so the avatar in the middle holds still.

IB

The class is wm wm-orbit-ring — the first half is the marker the trigger and reduced-motion rules hook into, the second is the effect.