Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Spinner - Inline with Text
A React inline spinner with Loading data text using flexbox alignment and gap spacing built with shadcn/ui Spinner component
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Silent loading states confuse users. This React pattern shows Spinner inline with Loading data text using flex items-center gap-2 creating horizontal loading indicator. Built with shadcn/ui Spinner with text-sm styling, it's perfect for list items, table rows, inline updates, partial page loads, or any loading state within content flow where full-screen spinner is excessive and users need context about what's loading without disrupting layout.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Inline with Icon Text
Spinner with icon and text
Inline Status
Spinner with status message
Loading Button
Button with spinner
Basic Spinner
Standalone spinner
Spinner in Input
Input with processing spinner
Spinner in Item
Progress item with spinner
Questions you might have
React Spinner - Loading Small Button
A React small button showing loading state with size-3 spinner and Please Wait text using disabled and size sm props
React Spinner Before Text
A React small spinner before text showing sync status using size-3 muted-foreground and text-sm built with shadcn/ui Spinner