Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Spinner examples · Standard

Muted Spinner for React

A spinner in the muted foreground color for quiet background work.

Framework
UI library

Background work shouldn't pull the eye from the content. This Spinner takes text-muted-foreground, the color of captions, so it reads as secondary: use it for syncing, saving drafts and other passive waits.

Preview

Preview width

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

How is this spinner muted?

Pass text-muted-foreground on Spinner. The icon draws with currentColor, so that text class is the color. This file changes nothing else.

What size is the muted spinner?

It stays at the default size-4 (16px). Add size-3 or size-8 on the same element when the wheel should be smaller or larger. Color and size are both classes.

Does the muted color follow light and dark mode?

Yes. text-muted-foreground reads the theme token, the same one captions and secondary labels use. You do not set a separate color for dark mode.

Can the parent set the muted color instead?

Yes. A text class on the parent tints the spinner, because the stroke is currentColor. This file puts text-muted-foreground on the Spinner itself, so the color stays even if the parent is a different color.

What does a screen reader announce?

Color does not change the announcement. The spinner still has role="status" and an aria-label of Loading. Pass your own aria-label, such as "Saving changes", and put the same words in text beside it.

How do I stop the spin for reduced motion?

The spin is animate-spin. Add motion-reduce:animate-none next to text-muted-foreground and the icon stays still. The status role and the label stay.

All 17 spinner examples