# ring

Featured Components⚛ TSX Live preview

Circular 3D Gallery Ring

Eight items orbit on a 3D ring that auto-rotates with perspective, pauses on hover, with a pulsing hub.

9.2k61.2k8.8kOpen

Conic Gradient Ring Spinner

A spinning conic-gradient arc revealed by a radial mask — one element, zero keyframe paths.

HTMLCSSReactAdvanced

6k42.8k9.4kOpen

Animated Gradient Progress Rings

Three SVG rings that stroke-draw to 82/64/95% with glow and count-up labels.

3.7k28.5k6.7kOpen

Particle Progress Ring Loader

A ring of 60 particles flowing around a track that fills with a breathing percentage readout.

26300Open

Circular progress ring

SVG ring fills with a glowing fuchsia arc and mono percentage — +10% and reset buttons animate it.

33100Open

Components Live preview

Rotating circular text badge

Text runs around an SVG circle and slowly rotates around a glowing gradient core — seal/badge stamp.

34400Open

UI Elements Live preview

Circular Loader Ring

Spinner ring with rotating gradient arc and smooth easing.

UI Elements Live preview

Percentage Ring

Circular progress ring showing a percentage with animated arc.

Progress Ring Count-up

Animated circular progress with count-up percentage.

Glowing Pulse Button

Button with pulsing glow rings radiating outward.

Loading Ring Pulse

Ring loader with pulsing halo and rotating arc.

Ring + Dots Combo Loader

Loading pair combining a rotating gradient ring and staggered typing dots.

Initials Avatar with Ring

Gradient initials avatar with hover ring and size variants.

Avatar with Status Ring

Round avatar with colored presence ring and small status icon.

Avatar with Activity Heat

Avatar whose ring thickness reflects recent activity level.

Glow Ring Loader

Thick ring loader with pulsing glow and gradient arc.

Sleep/Activity Ring Sliders

Two ring sliders showing time spent in sleep and activity.

Animations⚛ TSX Live preview

Animated Percent Rings

Circular rings filling to percentages with counting text.

Animations⚛ TSX Live preview

Dyson Ring Power

A glowing ring with energy pulses circulating around a core.