Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Inline with Text Spinner for React

A default 16px spinner beside the words Loading data... on one line. No data is being loaded.

A spinner and the words Loading data... sit on one line, with a small gap. The spinner is the default size. Nothing in the file loads data.

Use a word or two so people know what is loading, in a list or a panel. If you know the fraction, show Progress instead. In React, Base UI announces Loading as well as the visible words.

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

Anatomy

Spinner anatomy: item, spinner, title

Usage

<div className="flex items-center gap-2">
  <Spinner />
  <span className="text-sm">Loading data...</span>
</div>

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.

API Reference

Spinner

No extra props in this demo. The rest is on the Spinner page.

All 17 spinner examples