Shadcn Spinner: Loading Indicators for React Apps
A spinner tells users the app is working during fetches, submissions, and page transitions. The shadcn spinner is a compact loading indicator styled with Tailwind CSS, sized and colored through utility classes so it inherits your theme wherever it appears, from buttons to full-page loaders.
This page brings together 14 copy-paste loading spinner examples for React and Next.js, spanning the classic rotating circle, dot and bar animations, and size and color treatments, so you can keep one consistent loading language across an entire product.
Why use the Shadcn Spinner?
- Instant feedback: A visible indicator within a moment of user action prevents double clicks and reassures users the request went through.
- Inherits your theme: Color comes from currentColor and size from utility classes, so the same component adapts to buttons, cards, and overlays.
- Fourteen animation styles: Circular, dots, and bar variants let you match the indicator's energy to its context, subtle inline or prominent full-page.
- Accessible by default: A status role and screen reader text announce loading without visual users seeing anything extra.
- Effectively zero cost: Each variant is a few lines of SVG or CSS animation, adding no dependency and no measurable bundle weight.
Production tips
- Choose spinner or skeleton deliberately: Spinners suit short, action-triggered waits like saving. For initial content loads, skeletons that preview layout usually feel faster.
- Keep it in place: Show the spinner where the result will appear, inside the button being clicked or the panel being refreshed, not in a far corner.
- Avoid spinner flash: For requests that often resolve quickly, delay the spinner by about 150 milliseconds so fast responses never flicker.
- Escalate long waits: Past several seconds, a spinner alone feels stalled. Add text or switch to a progress indicator for lengthy operations.
- Respect reduced motion: Honor the prefers-reduced-motion media query with a gentler or static indicator for users who opt out of animation.
Works well with other components
The most common home for a spinner is inside a button during submission, with the control disabled until the request settles. For structural loading, a skeleton previews the incoming layout, a progress bar suits measurable operations, and an empty state takes over when the result comes back with nothing. Async option lists in a combobox also lean on a small inline spinner.
Loading states across our Next.js dashboards combine these pieces, spinners for actions and skeletons for first paint.
Under the hood
No primitive library is involved. As the shadcn spinner docs show, each spinner is plain accessible markup, an SVG or a handful of elements, animated with CSS and styled with Tailwind utilities, typed as an ordinary React component.
With no behavioral dependency, all spinner styles work anywhere Radix UI or Base UI components are used, and swapping animation styles later is a one-file change.