Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Spinner examples · Inline

Spinner After Text for React

A small spinner after a line of text saying the request is processing.

Framework
UI library

Put the words first when the message matters more than the motion. This line reads Processing your request, followed by a 12px Spinner, in a flex row.

Preview

Preview width

Processing your request

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 does the spinner come after the words?

The paragraph's children are the text "Processing your request", then the Spinner. In a flex row that paints in DOM order, so the words lead and the wheel follows.

What size is the spinner after the text?

size-3, which is 12px. The default is size-4. The paragraph is text-sm, so the smaller icon sits with that line.

How are the words and the spinner aligned?

The p is flex items-center gap-2 text-sm. items-center lines the icon up with the text, and gap-2 is the space between them.

What color is the spinner here?

The paragraph sets no text color, and the Spinner sets none either. The icon uses currentColor, so it matches the paragraph. Add text-muted-foreground on the p to mute both.

What does a screen reader announce?

The spinner has role="status" and an aria-label of Loading. The sentence is ordinary text, so it is read as well. Pass a more specific aria-label on the Spinner when Loading is not enough.

How do I stop the spin for reduced motion?

Add motion-reduce:animate-none on the Spinner, next to size-3. The icon stays still, and the sentence stays visible.

All 17 spinner examples