Progress Fill
No library Intermediate
The input background fills left-to-right proportional to the typed character count relative to a target length. A calm, satisfying completion indicator with smooth transitions.
0 / 30
The input background fills left-to-right proportional to the typed character count relative to a target length. A calm, satisfying completion indicator with smooth transitions.
Goal: Create a "Progress Fill" input with a left-to-right background fill.
Visual behavior: A text input with a target character count (e.g. 30). A translucent colored fill layer behind the input text grows left-to-right as the user types, proportional to value.length / target. At completion (100%), the fill color shifts to green and the border turns green. A small numeric counter below (e.g. "12 / 30") tracks progress. Transitions are smooth on every character.
Technique:
- Wrapper with position:relative
- Fill layer: absolutely positioned inside the input border (inset:1px), uses transform:scaleX(pct) with transform-origin:left
- Input sits above the fill layer (position:relative, z-index:1, transparent background)
- pct = Math.min(value.length / target, 1)
- Fill and border color: transition to accent on completion
- transition: transform 200ms ease on the fill layer
Accessibility: Numeric counter below provides same information without relying on color or fill width. Fill transition instant 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.