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.
Label with Tooltip
A React input group with Email Label and InfoIcon tooltip button showing help text using shadcn/ui InputGroup, Label, and Tooltip components
Loading States
A React input group with Spinner showing loading states at inline-end and inline-start positions using disabled inputs with shadcn/ui InputGroup