Loading State Button

What it does

Every click on a submit button comes with a tiny panic. Did that work? This button answers on the spot, a spinner while the request runs, then a clear success, or a clean return if something failed.

• Loading starts when the real request starts; success only shows once the server truly confirms.
• Faking a delay or an early success is banned in the code as a dark pattern.
• Errors hand the moment back to your form's own messages.
• While it spins, the button locks itself, so nobody can double-submit an order or a form.
• It holds its exact size through every state; the page never twitches. Click the preview to feel the flow.

How it works

1. 1Pick the loading look, a spinning ring or three pulsing dots.
2. 2Pick the success moment: a quick checkmark swap, or the label flipping to Done for about a second and a half.
3. 3Copy the prompt, the button's build notes for your AI, into whichever AI you use.
4. 4Wire the states to your real request at the marked spots, so the button reports what actually happened, never theater.
5. 5Click submit twice fast as a test; the second click should bounce off while the first is still spinning.
6. 6Then watch a full round trip: spinner, confirmation, back to normal, all without the button ever changing size.

What you can customize

• Loading indicator: the spinning ring is the quiet classic; the three pulsing dots feel a touch more playful.
• Success display: the checkmark is wordless and universal; the label change spells out Done for a beat before the button resets.
• Size, color, and lettering stay completely your own, because your AI builds the states into the buttons you already use.