Skip to main content
Frontend Glossary

UI components · Feedback

Spinner

Also called: Loading spinner, Loader, Loading indicator, Spin

A small icon that keeps spinning to show something is processing or loading, without saying how long it will take.

Click “Labeled” to see what each part is called.

How to tell AI

Swap in your own content first

After I click "Submit," show a 14px spinning icon to the left of the button text and disable the button so it can't be submitted twice. When the table's filters change, cover the table area with a semi-transparent white overlay with a spinner and "Loading..." in the middle. Keep the existing data instead of clearing it.

Send to

01Decide

Does your content look like this?

Check both columns to confirm Spinner is what you need.

Use Spinner when

  • Waiting for an API response after clicking a submit button, usually a second or two
  • A table or card refreshes in place, and you want to keep the old data while showing it's updating
  • You can't estimate the wait time and can't get a percentage

Pick something else when

  • The page is loading for the first time and the layout is known; a skeleton reduces jumping

    Use insteadSkeleton

  • Long tasks like uploads or exports can report real progress; a progress bar is more reassuring

    Use insteadProgress

  • The wait is over ten seconds; a spinner alone makes users think the page is frozen

Not sure? Upload a screenshot and page analysis will check which layout each block should use.

02Pitfalls

Common misuse

It looks like it works, but it makes things harder for users.

  1. 01

    Putting one centered spinner on the whole page and leaving it blank until all the data arrives

  2. 02

    The submit button can still be clicked while it's spinning, causing duplicate submissions

  3. 03

    Five or six spinners on the page at once, each card spinning on its own

03Spot it

How to spot it

Look at the overall structure first, then check a few features you can spot at a glance.

Structure

A spinning ring or dot icon, optionally with "Loading" text. For partial loading, it's often placed on a semi-transparent overlay.

PartsClick one to highlight it in the wireframe above

04Explained

In detail

A spinner is for waits of unknown length, usually just a second or two: a spinner inside a button after clicking Submit, a semi-transparent overlay with a spinner over a table after changing filters, or a spinner at the top during pull-to-refresh. It only tells the user "working on it, hang on," not how far along it is.

How it differs from Progress: use a progress bar when you can calculate the percentage, and a spinner when you can't. How it differs from a Skeleton: when a page or card loads for the first time and the content layout is known, a skeleton draws gray outlines first so the layout doesn't jump. A spinner fits small waits like a partial refresh or a button submit. Putting one centered spinner on the whole page and showing nothing until all the data comes back is the most common approach, and the one that makes people most anxious.

Developer info
Term ID
component-spinner
DOM selectors

The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).

  • .ant-spin
  • .el-loading-mask
  • [class*="MuiCircularProgress-root"]
  • .t-loading
  • .n-spin-body
  • .spinner-border
  • .spinner-grow
  • .animate-spin
Priority
2 · when several match at the same level, the higher priority wins
Version
v2 · updated Sep 29, 2026