Charging
No library Intermediate
A green progress bar fills left-to-right inside the box over 600ms like a battery charging. When full, the bar fades and a check mark springs in. Unchecking drains the bar.
A green progress bar fills left-to-right inside the box over 600ms like a battery charging. When full, the bar fades and a check mark springs in. Unchecking drains the bar.
Goal: Create a "Charging" checkbox animation.
Visual behavior: A 28×28px square checkbox (7px border-radius). Off state: transparent fill, white/25% border. On state: green (#22c55e) border. When checked, a thin horizontal progress bar (height: 4px) inside the box fills left-to-right over 600ms via requestAnimationFrame with ease-out easing. When the bar reaches 100%, it fades out and a green check mark springs in with a scale overshoot. Unchecking immediately shows the check fading, bar draining right-to-left.
Technique: RAF loop drives numeric barWidth state (0-100). bar width is set via inline style. On completion, setCharged(true) triggers the check mark reveal.
Accessibility: Hidden native <input type="checkbox">. Animations removed 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.