Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Spinner examples · Inline

Inline with Text Spinner for React

A spinner beside a Loading data... label on one line.

Framework
UI library

A spinner with a word or two says what is loading without taking over the layout. Here a default Spinner sits beside Loading data... in a flex row, for a list, a table row or a panel that fills in.

Preview

Preview width
Loading data...

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How does the spinner sit on the same line as the text?

A div with flex items-center gap-2 holds the Spinner and a span. items-center lines them up, and gap-2 is the space between them.

What does the line say?

The span is text-sm and reads "Loading data...". The ellipsis is part of that string. The spinner is the default size, size-4.

How do I put the spinner after the words?

Swap the children: the span first, then the Spinner. The row still uses flex items-center gap-2. Add size-3 on the spinner when it should be smaller than the default.

How do I mute this line?

Add text-muted-foreground on the flex div. The span inherits it, and the spinner does too, because the icon uses currentColor.

What does a screen reader announce?

The spinner has role="status" and an aria-label of Loading. The span is visible text, so "Loading data..." is read as well. Pass aria-label="Loading data" on the Spinner when you want the label to match the sentence.

How do I stop the spin for reduced motion?

Add motion-reduce:animate-none on the Spinner. The "Loading data..." span stays. The status role stays too.

All 17 spinner examples