Stop Rebuilding UI

Shadcn.io is not affiliated with official shadcn/ui

Previous: Default Spinner
Next: Large Spinner

Small Spinner

A compact React spinner with size-3 (12px) for subtle loading indicators and inline status built with shadcn/ui Spinner

Large spinners dominate subtle interactions. This React pattern shows size-3 Spinner (12px)—very small spinner for unobtrusive loading indication. Built with shadcn/ui Spinner with size-3 className reducing from default 16px to compact 12px, it's perfect for auto-save indicators, inline badges, toolbar buttons, status icons, background operations, or any loading state where subtlety matters and full-size spinner overwhelms the interface feeling too heavy for the context.

Small Spinner preview

Scroll to load preview

Installation

Default Spinner

Standard size-4 spinner

Large Spinner

Larger size-8 spinner for prominence

Spinner Before Text

Small spinner with text

Spinner After Text

Small spinner in trailing position

Loading Button

Spinner in button context

Status Badge

Badge with status indicator

FAQ

Was this page helpful?

Sign in to leave feedback.

Default Spinner

A standalone React spinner component showing default size and color for basic loading states built with shadcn/ui Spinner

Large Spinner

A prominent React spinner with size-8 (32px) for full-screen loading and high-visibility states built with shadcn/ui Spinner