Shadcn Spinner

Q: Can I customize the spinner animation speed?

Yes. Use Tailwind utilities like `animate-spin` and customize duration in your Tailwind config, or add inline CSS animation properties. Avoid very fast animations that may trigger vestibular motion issues.

Browse 12 production-ready shadcn spinner components for loading indicators, progress feedback, and async operation states. Shadcn Spinner includes accessible ARIA labels and pairs seamlessly with Shadcn Create styles.

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.

When to use

Pending states inside buttons, status badges and search fields while a request runs
Loading views for a card or an empty panel, including blurred covers over content being refreshed
Inline notes such as checking, syncing or reconnecting, led by a small tinted spinner or bouncing dots

When not to use

Content of a known layout, held as muted placeholder shapes until it arrives: use the Skeleton component
A wait where the share of work done is known, such as an upload percent: use the Progress component
A save control that tracks its own pending and done states after a click: use the Button component

Agent notes

No example holds a pending flag and disabled is hardcoded where it appears; show the indicator and lock controls from your own request state

Markdownhttps://web.dev.reui.io/components/spinner.md

MCPget_component("spinner")

Installnpx shadcn@latest add spinner

Full index for agents:llms.txtReUI MCP setup

Shadcn Spinner: Loading Indicators for React Apps

Shadcn Spinner is a minimal loading indicator that signals async operations or data fetches in progress. Built with Lucide icons and Tailwind animation utilities, it pairs with ARIA live regions and status roles so screen readers announce loading state.

Customize the icon from Lucide and the animation class to match your brand. Shadcn Create style options apply to spinner color and sizing so your design tokens flow into exported code.

ReUI lists spinner components inside buttons, data tables, form submissions, and skeleton loading states so you evaluate placement, timing, and animation rhythm next to real layouts. The sections below explain what it is, why teams use it, which features matter, and how it pairs with other components.

What is Shadcn Spinner?

A spinner is a rotating or animated icon that conveys an in-progress operation. Shadcn Spinner uses a Lucide icon (default: LoaderIcon) with the Tailwind animate-spin class and wraps it with semantic HTML and ARIA attributes so assistive technologies understand the loading context.

Components here show spinners in buttons during form submission, floating spinners for page-level loads, spinners paired with text for clarity, and inline spinners in data table cells. They help you decide placement, size, and whether text or an icon alone is enough.

Why Use Shadcn Spinner?

Teams use spinners to indicate that the app is fetching data or processing a request. A visual indicator reduces user frustration by confirming the app is responding, even if the operation is slow. Spinners are usually paired with disabled buttons or other UI cues to prevent duplicate submissions.

The layouts on this page show how to combine spinners with buttons, skeleton loaders, and progress text.

Shadcn Spinner Features

Lucide Icon Foundation. Customizable SVG icon from Lucide; swap the LoaderIcon for another icon that fits your brand or context (e.g., MoreVertical for a rotating menu).
Tailwind Animation. Uses the animate-spin class for smooth rotation. Customize duration or easing via Tailwind theme or inline utilities.
Accessible Announcements. Pair with role="status" and aria-live="polite" so screen readers announce the loading state. Include visually-hidden text for clarity.
Size and Color Variants. Control spinner size via Lucide size props and color via Tailwind text utilities. Match your Shadcn Button or other UI elements.
Button and Inline Placement. Render inside Shadcn Button (with data-icon) or inline with text, list items, or table cells for contextual loading feedback.

Place spinners inside Shadcn Button components with the disabled prop to prevent double-clicks during async operations. Disable the button and show a spinner until the operation completes.

Pair spinners with Shadcn Skeleton loaders for faster perceived performance. Skeleton placeholders fill the layout while spinners indicate data is still fetching.

Use spinners in Shadcn Card or Shadcn Data Grid to show item-level loading. Combine with Shadcn Alert or Shadcn Sonner to show completion or errors once the operation finishes.

Frequently Asked Questions

Should I show a spinner or skeleton loader for page-level loads?

Use a spinner for quick, short-lived operations (less than 2 seconds). Use Skeleton loaders for longer waits so the UI feels more responsive with placeholders. Combine both: skeleton content with spinners at strategic points.

How do I show a spinner in a button during async operations?

Set a loading state in React. When true, render the spinner inside the button and disable it with the disabled prop. For example: <Button disabled={isLoading}><Spinner /> {isLoading ? 'Saving...' : 'Save'}</Button>.

Is a spinner accessible to screen readers?

By default, an animated icon is invisible to screen readers. Wrap the spinner with <div role="status" aria-live="polite"><span className="sr-only">Loading...</span><Spinner /></div> so the status is announced.

What's the difference between a spinner and a progress bar?

Spinners indicate something is loading but don't show progress percentage. Progress bars show a completion percentage (0 to 100%). Use spinners for fast, indeterminate operations; use progress for long uploads/downloads.

Can I customize the spinner animation speed?

Yes. Use Tailwind utilities like animate-spin and customize duration in your Tailwind config, or add inline CSS animation properties. Avoid very fast animations that may trigger vestibular motion issues.

Do spinners work inside disabled button states?

Yes. The spinner animates even inside a disabled button. The disabled state prevents clicks while the loading indicator shows the operation is in progress. Once complete, enable the button and remove the spinner.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.