Gradient Ring
No library Intermediate
A spinning ring with a full-spectrum conic gradient — rose to violet in one continuous arc. Pure CSS, no dependencies.
A spinning ring with a full-spectrum conic gradient — rose to violet in one continuous arc. Pure CSS, no dependencies.
Goal: Create a "Gradient Ring" loader animation.
Visual behavior: A 44×44 circle rendered as a rainbow ring stroke (~4px thick). The gradient sweeps through rose → orange → yellow → green → blue → violet → back to rose using a conic-gradient. The whole ring spins at ~1 revolution per second.
Technique: A div with border-radius 50% and a conic-gradient background. A CSS mask (radial-gradient from center, transparent inside, opaque in the stroke zone) cuts out the interior, leaving only the colored ring. A rotate(360deg) keyframe drives the spin.
Accessibility: role="status" and aria-label on the wrapper. Animation paused and opacity reduced under prefers-reduced-motion.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
Return a single self-contained component. Do not introduce dependencies beyond what I've listed.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.