Skip to content

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

Free

Spinner After Text for Solid

The words Processing your request come first, then a 12px spinner. The line does not track a real request.

UI library: Ark UI

A line reads Processing your request, then a 12px spinner. The words come first. Nothing in the file is processing.

Put the words first when the message matters more than the motion. A spinner before the words suits a status that leads with motion. A known percent fits Progress. In Solid, Ark UI does not know when the work ends. You hide the spinner.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Spinner anatomy: item, spinner, title

Usage

<p class="flex items-center gap-2 text-sm">
    Processing your request
    <Spinner class="size-3" />
  </p>

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.

API Reference

Spinner

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

All 17 spinner examples