Comet
No library Intermediate
A conic-gradient ring that spins like a comet tail — purple-to-pink arc on a masked circle. Pure CSS, no dependencies.
A conic-gradient ring that spins like a comet tail — purple-to-pink arc on a masked circle. Pure CSS, no dependencies.
Goal: Create a "Comet" loader animation.
Visual behavior: A 44×44px circle ring that spins continuously. The ring uses a conic-gradient fading from transparent → purple → pink → transparent, creating a comet-tail sweep effect. The ring itself is cut out via a CSS mask so only a ~4px border is visible.
Technique: A single div with border-radius: 50% and a conic-gradient background. A radial-gradient CSS mask punches out the center, leaving just the ring edge. The element rotates with a linear keyframe animation at ~0.9s per revolution.
Accessibility: role="status" and aria-label on the element. Animation paused 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.