Password Strength

Create a live password strength meter. Under a password input, a segmented meter (4 equal bars, 4px tall, 2px radius, 4px gaps) that fills left to right as the password gets stronger, plus a one-word verdict. Scoring (0-4): +1 for 8+ characters, +1 for 12+, +1 for mixed upper/lowercase, +1 for a digit, +1 for a symbol, capped at 4. Map score to color and label: 0-1 red 'Weak', 2 amber 'Okay', 3 light green 'Good', 4 green 'Strong'. The input's border, the filled bars, and the label all share the current color, transitioning 300ms so the meter 'warms up' smoothly while typing. Before any input, show a neutral hint ('Use 12+ chars, mixed case, a number'). Details: reserve the label's height so nothing jumps; connect the label to the input with aria-describedby and give it role='status' so screen readers hear updates; never block submission from the meter alone, it's feedback, not validation. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.