Radar Sweep
No library Advanced
A conic gradient sweeps clockwise from the top, filling the box like a radar scan over ~700ms. The check mark appears once the sweep completes. Driven by a requestAnimationFrame loop.
A conic gradient sweeps clockwise from the top, filling the box like a radar scan over ~700ms. The check mark appears once the sweep completes. Driven by a requestAnimationFrame loop.
Goal: Create a "Radar Sweep" checkbox animation.
Visual behavior: A 28×28px square checkbox (7px border-radius). Off state: transparent fill, white/25% border. On state: indigo (#6366f1) fully filled with a white check mark. When toggled, a conic-gradient sweeps clockwise from the top (from -90deg) filling from 0% to 100% over ~700ms, then the check mark fades in. Unchecking reverses the sweep from 100% back to 0%.
Technique: requestAnimationFrame loop drives a numeric sweep state (0–100). The box background is set to conic-gradient(from -90deg, #6366f1 N%, transparent N%) where N is the animated value. RAF is cancelled on unmount.
Accessibility: Hidden native <input type="checkbox">. Animation skipped 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.