Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Muted Spinner
A subtle React spinner with muted-foreground color for background operations and de-emphasized loading states built with shadcn/ui Spinner
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Prominent spinners distract from primary content during background operations. This React pattern shows Spinner with text-muted-foreground className—reduced contrast spinner for subtle loading indication. Built with shadcn/ui Spinner using muted-foreground theme color with lower opacity, it's perfect for auto-save indicators, background sync, passive updates, supplementary loading, non-critical operations, or any loading state where drawing attention away from content harms experience and subtle indication suffices.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Default Spinner
Standard foreground color spinner
Primary Color Spinner
Branded primary color spinner
Spinner Before Text
Muted spinner with text
Spinner After Text
Subtle trailing spinner
Muted Badge
Subtle muted badge styling
Muted Text
Reduced emphasis text