Loading to Success

Create a loading-to-success button. A submit button with three states. Idle: normal label (e.g. 'Save changes'). Loading: label changes to a progress word ('Saving...') with a small spinner: a 15px circle border where only the top segment is opaque, rotating 360deg every 0.7s linear; the button is disabled during this state. Success: background transitions to the success green over 300ms, and an SVG check mark draws itself using the stroke-dashoffset technique over 400ms ease-out next to the word 'Saved'. Critical detail: give the button a min-width wide enough for its longest state, so it never changes size between states. After success, return to idle after ~1.8s. Wire the states to the real async action (start = loading, resolve = success, reject = an error state with a short message). When prefers-reduced-motion is enabled, swap states instantly without the spinner rotation or check drawing. 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.