Loading State Button

What it does

Every click on a submit button comes with a tiny panic (did that work?). Grab this design here and your AI builds the same honest button into your own forms.

This button answers right away, a spinner while the request runs, then a clear success, or back to normal if it failed.

• Loading starts when the real request starts; success only shows once the server truly confirms, and faking it is banned in the code.
• If something goes wrong, your form's own error messages take over.
• While it spins, the button locks itself, so nobody can send the information twice.
• It keeps its size in every state; the page never jumps. Click the preview to watch it happen.

How it works

1. 01

   Pick the loading look, a spinning ring or three pulsing dots.

2. 02

   Pick the success moment: a quick checkmark swap, or the label changing to Done for about a second and a half.

3. 03

   Copy the prompt, the button's build notes for your AI.

4. 04

   Paste it into whichever AI you use, Gemini, Copilot, Claude, any of them.

5. 05

   Tell your AI where the button goes when it asks: every form, one specific form, one type of page, or one type of button.

6. 06

   Tell your AI what each button submits when it asks, so the states follow the real request, nothing fake.

7. 07

   Click submit twice fast as a test; the second click should do nothing while the first is still spinning.

8. 08

   Watch one full run: spinner, confirmation, back to normal, all without the button ever changing size.

9. 09

   Check it on your phone, the button should stretch full width if your form's other buttons do, and stay easy to tap.

What you can customize

• Loading indicator: the spinning ring is the quiet classic; the three pulsing dots feel a bit more playful. The click can feel physical too, with a button that dips in when you press it.
• Success display: the checkmark is wordless and universal; the label change shows Done for a moment before the button goes back to normal.
• Size, color, and lettering stay completely your own, because your AI builds the states into the buttons you already use. Pairs with the icon slide button if you also want an invitation before the click. Browse the rest of the button collection to see what else your forms could use.