Dual Ring
No library Beginner
Two concentric rings rotating in opposite directions at different speeds — outer ring clockwise in indigo, inner ring counter-clockwise in pink. Pure CSS, no dependencies.
Two concentric rings rotating in opposite directions at different speeds — outer ring clockwise in indigo, inner ring counter-clockwise in pink. Pure CSS, no dependencies.
Goal: Create a "Dual Ring" loader animation.
Visual behavior: Two concentric ring spinners. The outer ring (48px) rotates clockwise in indigo at 1s/rev. The inner ring (30px, inset 9px from each edge) rotates counter-clockwise in pink at 0.65s/rev. Each ring is a circle with a transparent border except for two opposite sides — top+bottom for outer, left+right for inner — creating an arc effect.
Technique: Two absolutely-positioned spans sharing the same center. Each has border-radius:50% and border with selective colors on two sides (the other two sides transparent). One keyframe rotates 0→360deg, another 0→-360deg. Different durations create an ever-changing combined pattern.
Accessibility: aria-label on the wrapper. Animations disabled 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.