Question 1

What is a spinner?

Accepted Answer

A turning wheel that says the app is working and the wait has no known length: saving a form, fetching a record, sending a message. shadcn.io's Spinner is a Lucide loader icon with `animate-spin`, `role="status"` and an `aria-label` of Loading, sized and colored with Tailwind classes. It comes for React on Base UI, React Aria, Ark UI and Radix UI, and for Vue, Svelte and Solid.

Question 2

Are these spinner examples free?

Accepted Answer

Yes. Every example is free to use in personal and commercial projects, with no attribution. Seeing the code and installing it takes a free shadcn.io account.

Question 3

Spinner, Skeleton or Progress: which one?

Accepted Answer

A Spinner for a short wait you can't measure. A Skeleton when content with a known layout is on its way, like cards or a table. A Progress bar when you know how far along the task is, like an upload.

Question 4

When should I show a spinner at all?

Accepted Answer

Skip it for waits under a few hundred milliseconds, where a flash of motion distracts more than it helps. For longer waits, show it where the action happened, such as in the button, and say what's happening in words.

Question 5

How do I put a spinner in a button?

Accepted Answer

Make the `Spinner` the button's first child with `data-icon="inline-start"`, keep a label such as Saving..., and disable the button while the work runs so it can't be pressed twice (`isDisabled` on React Aria). Hide the spinner with `aria-hidden` there, since the label already says what's happening.

Question 6

How do I show a spinner beside text?

Accepted Answer

Put the spinner and the words in a flex row with `items-center` and `gap-2`. A 12px spinner (`size-3`) fits small text; the default 16px fits body text.

Question 7

How do I size or color the spinner?

Accepted Answer

With classes: it's `size-4` (16px) by default, so pass `size-3`, `size-6` or `size-8`. It draws with `currentColor`, so `text-primary`, `text-muted-foreground` or the parent's text color sets its color.

Question 8

How do I install a spinner example?

Accepted Answer

Sign in with a free account, open the example and run the install command it shows. It adds the example and the components it uses, such as Spinner and Button, to your project, for your framework and UI library.

Question 9

How do I show the spinner only while something loads?

Accepted Answer

Keep a loading flag in your component's state, set it when the work starts and clear it when it ends, and render the spinner (and disable the button) while it's set. The examples show the loading state itself, with no state around it.

Question 10

How do I respect reduced motion?

Accepted Answer

Add `motion-reduce:animate-none` to the `Spinner`. `animate-spin` keeps turning otherwise. The status role and label stay, so the wait is still announced.

Question 11

Which libraries do spinner examples use?

Accepted Answer

shadcn.io's Spinner, and the components some examples place it in (Button, Empty, Input Group, Item, Progress), built on Base UI, React Aria, Ark UI or Radix UI in React and on Ark UI in Vue, Svelte and Solid, with Tailwind CSS and Lucide icons.

Question 12

Are the spinners accessible?

Accepted Answer

The Spinner has `role="status"` and an `aria-label` of Loading, which you can change to name the work, such as Loading messages. Inside a button with a label, the examples hide it with `aria-hidden` so the label isn't read twice; an icon-only button gets its own `aria-label`.

Question 13

Do the examples work in Vue, Svelte and Solid?

Accepted Answer

Yes. Each example looks the same on every target. Only the prop names differ where the libraries differ, such as `isDisabled` on React Aria.

Spinner Examples

Spinner in Empty State

Spinner in Input Group

Spinner in Item

Loading Button

Loading Icon Button

Loading Outline Button

Loading Secondary Button

Loading Small Button

Spinner After Text

Spinner Before Text

Spinner in List Item

Inline with Text

More component examples

Alert

Empty State

Progress

Skeleton

Sonner

Switch

Table

Tabs

Spinner examples MCP, with Pro

Individual

Team

Organization

Individual

Team

Organization

Frequently asked questions

Every spinner example. One prompt away.