Skip to content

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

Free

Small Spinner for Vue

A 12px spinner for a tight inline spot. It takes the surrounding text color and is named Loading.

UI library: Ark UI

One spinner is on screen at 12px. It is smaller than the default 16px wheel. The file does not start a request.

Use the small size beside captions, auto-save notes, and toolbar status. A page-level wait wants the large size. If you know the fraction, use Progress. In Vue, Ark UI keeps role status and the label Loading.

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

<Spinner class="size-3" />

FAQ

How does this spinner become 12px?

Spinner defaults to size-4 (16px). This file passes size-3, which sets the width and height to 12px. Size is that class.

What color is the small spinner?

The stroke is currentColor, so it takes the text color around it. This file sets only the size. Add text-muted-foreground or text-primary on the same Spinner when the color should change too.

What text size sits next to a size-3 spinner?

text-sm or text-xs lines up with a 12px icon. Put both in a flex row with items-center and gap-2, and keep the spinner at size-3.

Can I put this spinner in a small button?

Yes. On a Button with size="sm", pass size-3 on the Spinner and set data-icon to inline-start so the button's icon spacing applies. Disable the button so it can't be pressed again.

What does a screen reader announce?

The spinner has role="status" and an aria-label of Loading, at any size. Pass your own aria-label, such as "Saving", when Loading is too vague. A visible word next to the icon says the same thing in text.

How do I stop the small spinner for reduced motion?

The spin is animate-spin. Add motion-reduce:animate-none and the 12px icon stays still. The status role and the label stay.

API Reference

Spinner

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

All 17 spinner examples