Spinning Ring
No library Beginner
A circular ring with a transparent track and a solid arc that spins continuously. Pure CSS, no dependencies.
A circular ring with a transparent track and a solid arc that spins continuously. Pure CSS, no dependencies.
Goal: Create a "Spinning Ring" loader animation.
Visual behavior: A circular ring (40×40px) with a transparent track and a solid arc covering roughly one-quarter of the circumference. The ring spins continuously at a constant speed (~0.8s per rotation). Stops under prefers-reduced-motion.
Technique: Single div with border-radius 50%, a semi-transparent border for the track, and a solid colored border-top for the arc. CSS animation: rotate(360deg) on an infinite linear loop. GPU-only transform — no width/height animation.
Accessibility: role="status" and aria-label on the element. Spin animation disabled under prefers-reduced-motion; static ring shown at reduced opacity instead.
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.