Progress Line Sign In Login Block for React

Nothing leaves the page. Sign in locks the fields for 800 milliseconds, then reports "Signed in, in this demo. Nothing was sent." in a polite status message and in the foot, and moves focus to that line; Try again unlocks the fields with your email still filled in. To wire it for real, post the email and password to your auth endpoint where the code says so and keep the locked state until it answers. The line is a fixed sweep, not a measurement of the request, so for a slow request keep it full and let the result replace it, or fade it when the answer comes.

It's one small element laid over the band's top rule: it starts at zero width and a CSS transition scales it to the full width over 800 milliseconds, from the start side, so it fills from the other direction in a right-to-left language. It's decorative and hidden from assistive technology; the busy button and the status message carry the meaning. With reduced motion the line jumps to full without moving, and when it's done it fades out and resets without playing backwards.

While the request is out, a change to the email or password would make the page say something untrue about what was sent, so both fields sit in one native fieldset that is disabled; the browser also drops them from the form and from the tab order. Because a disabled field loses focus, focus moves to the result line when the wait ends, which a screen reader reads out. The locked fields keep their values, so the visitor sees what was sent.

A disabled button can't explain itself, and keyboard users can't reach it. Here it stays enabled until a press has something to send: pressing it with an empty or malformed email, or no password, marks those fields invalid, writes one sentence under each and moves focus to the first, and the line doesn't move. Each field keeps a line for its problem even when there is none, so nothing shifts.

The accent here is the line's motion, not a color ramp: it's the text color, the only accent the page needs, and it works in every theme and in both light and dark. The primary color stays on the one button.

Tab runs through the email, the password, its show and hide toggle, Sign in, Forgot password and Create account; Enter in either field signs in. The form is marked busy while it waits, the status message says "Signing in…" and then the result, and focus lands on the result line.