Skip to content

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

Free

Inline with Text Spinner for Vue

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

UI library: Ark UI

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 Vue, Ark UI announces Loading as well as the visible words.

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

<div class="flex items-center gap-2">
  <Spinner />
  <span class="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