Live preview Avatars
Orbit Counter Clockwise Loader
The outer arc turns anticlockwise while the inner arc turns the other way.
#ring CSS effects
12 free, pure-CSS effects match the "ring" tag. Each is copy-ready and needs no library or build step.
Live preview Alerts
Cascade Orbit Alert
A dashed ring with an orbiting bead turns behind the icon of a long running job.
Live preview Alerts
Jade Check Alert
A success notice whose check orb beats gently inside an expanding halo ring.
Live preview Alerts
Orbit Submit Alert
A submit confirmation where a wedge sweeps the ring shut before the tick is drawn in.
Live preview Avatars
Chalk Split Dual Ring Avatar
A two-tone ring cut cleanly in half spins a half turn when hovered.
Live preview Avatars
Coil Two Tone Conic Frame
A masked conic ring alternates two tones and reverses direction while hovered.
Live preview Avatars
Dune Completion Ring Avatar
An SVG progress ring reports profile completion and refills when hovered.
Live preview Avatars
Garnet Signal Colour Rings
Three avatars whose ring colour alone encodes online, busy and away.
Live preview Avatars
Spiral Padding Ring Avatar
The gap around the portrait is pure padding, so hovering can widen the whole ring.
Live preview Avatars
Summit Focus Within Avatar
Focusing the action button lights a ring around the whole avatar block.
Live preview Avatars
Tide Thin Thick Ring Swap
A hairline ring and a heavy ring trade their weights when the avatar is hovered.
Live preview Sliders
Marble Ring Slider
A hollow marble ring floats over a shallow channel and shows the rail through it.