Spinner

You might say

Show a loading spinner when things take a while, or people will think the page is broken.

A rotating indicator that shows a short, indeterminate waitUse a spinner for a brief wait with no reliable completion percentage, such as a submit button, local refresh, or modal task. Name the work in progress; for a long wait, offer cancellation, retry, or a failure result.

Loading Spinner

Generating previewThis usually takes a few seconds. Keep this page open.

Quick checkChoose the best answer

Saving usually finishes in two seconds, but remaining work is unknown. What should appear?

Show a Spinner and Saving in the button, disabling duplicate submissionShow Progress slowly moving from 0% to 100%Show no state and update suddenly on success

You can say this to an AI Agent

When saving starts, show a Spinner and Saving in the current button and disable duplicate clicks; restore it with a visible success or failure result. Simulate a two-second wait and one failure, confirming no duplicate request and both outcomes are visible.

Spinner≠Progress

spinner only shows that work is still happening; it does not say how much is done. Progress shows overall completion and, when measurable, a percentage.

Spinner≠Skeleton

spinner suits a brief local wait. Skeleton reserves the shape of a larger page or content area before it arrives.

When to use it

Brief wait after button submission
Refreshing a local section
Work with no measurable total

When NOT to use it

A known file size or completion ratio: use Progress
A predictable full-page layout: use Skeleton
A long wait with no cancel, error, or retry path

Anatomy

Saving…

Moves continuously without implying a fake percentage

Names the task the system is processing

Variants

In button

When submission temporarily locks the action

Inline

Refreshing

When a list or area updates

Centered

While a modal or blank panel is processing

Typical use cases

Save button

List refresh

Recent projects

Modal processing

Exporting reportKeep this window open