Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Spinner examples · Inline

Spinner Before Text for React

A small spinner before a muted line of text saying changes are syncing.

Framework
UI library

A quiet status line for background work. A 12px Spinner leads the muted words Syncing your changes, and both take the paragraph's color.

Preview

Preview width

Syncing your changes

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

Why is the spinner before the words?

The Spinner is the first child of the paragraph, and the text "Syncing your changes" is the second. The p is a flex row, so that DOM order is the visual order.

Why are the spinner and the text both muted?

text-muted-foreground is on the p, not on the spinner. The icon uses currentColor, so it picks up the paragraph's text color along with the words.

What size is the spinner next to Syncing your changes?

size-3 (12px) on the Spinner, and text-sm on the paragraph. items-center aligns them, and gap-2 is the space between.

Why is this a paragraph?

The status is one line of text, so the file uses a p with flex on it. The spinner is an SVG inside that paragraph, with role="status".

What does a screen reader announce?

The spinner's aria-label is Loading, and the paragraph text is "Syncing your changes". Pass a matching aria-label, such as "Syncing your changes", when you want one announcement for the line.

How do I stop the spin for reduced motion?

Add motion-reduce:animate-none on the Spinner, next to size-3. The words stay, and the icon stops.

All 17 spinner examples