Loading & Progress

Button Loading State

Also called Spinner button, Loading button, Button spinner, Submit loading state

A button swaps its label for, or adds, a small spinner while an action runs.

Form submit, async actions

  • spinner + text
  • spinner only
  • spinner
  • pulse loading

View demo source

Prompt

Replace [where] with the part of your page and paste the prompt into your AI agent. Each prompt includes the name of the motion, so next time you can simply ask for it by name.

Add a "Button Loading State" (also called a spinner button or loading button) to [where].
When pressed, the button should give a small press, fade its label out and show a small spinner in its place while the action runs, then bring the label back when it finishes.
Keep the button's width fixed while it loads, block repeat presses, and announce the busy state to screen readers.

Replace [where] with the part of your page and paste the prompt into your AI agent. Each prompt includes the name of the motion, so next time you can simply ask for it by name.