Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Small Spinner
A compact React spinner with size-3 (12px) for subtle loading indicators and inline status built with shadcn/ui Spinner
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
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