Shadcn.io is not affiliated with official shadcn/ui
Animated Icon Spinner
A React input group with animated LoaderIcon using animate-spin class and Please wait text at different positions with shadcn/ui InputGroup
Custom spinners need flexibility—this React input shows LoaderIcon from Lucide React with animate-spin Tailwind class at inline-start and Please wait InputGroupText at inline-end creating dual-position loading feedback. Built with shadcn/ui InputGroup, InputGroupInput, InputGroupAddon, and InputGroupText components featuring data-disabled attribute, disabled state, two separate addons for icon and text, text-muted-foreground styling. The icon-spinner input creates customizable loading—perfect for branded spinners, custom animations, specific icon choices, asymmetric layouts, or anywhere default Spinner component needs customization or alternative positioning.
Animated Icon Spinner preview
Installation
Related Components
Loading States
Default Spinner component usage
Spinner with Text
Spinner with text in same addon
Textarea Loading
Spinner with textarea
Multiple Icons
Multiple icon addons
Character Counter
Text at inline-end
Standard Button
Button loading states
FAQ
Was this page helpful?
Sign in to leave feedback.
Spinner with Text
A React input group with Spinner and Saving text label at inline-end showing explicit loading message using shadcn/ui InputGroup components
Textarea Loading
A React input group with Spinner for textarea and input showing loading states at block-end and inline-end positions using shadcn/ui InputGroup