Count Ring
No library Advanced
An SVG circular ring fills via stroke-dashoffset around a character count badge as the user approaches the limit. The ring shifts from green to amber to red near the maximum.
80
An SVG circular ring fills via stroke-dashoffset around a character count badge as the user approaches the limit. The ring shifts from green to amber to red near the maximum.
Goal: Create a "Count Ring" character counter input with SVG ring.
Visual behavior: A text input with a character limit (e.g. 80 chars). A small circular SVG ring (32×32px) sits inside the input at the right edge. The ring fills clockwise via stroke-dashoffset as the user types (0% fill at empty, 100% fill at limit). Color: green → amber at 85% → red at 100%. A numeric remaining-count label sits in the center of the ring. The input border turns red at the limit.
Technique:
- CIRCUMFERENCE = 2 * Math.PI * RADIUS (e.g., radius 14)
- strokeDasharray = CIRCUMFERENCE
- strokeDashoffset = CIRCUMFERENCE * (1 - pct), where pct = value.length / MAX
- SVG is rotated -90deg so fill starts from top
- Wrapper div with position:relative; ring is absolute right-positioned
- Input has extra right padding to not overlap ring
Accessibility: Numeric count label provides the same info as the ring without color dependency. Ring transition 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.