Spinner

React Spinner components are used to indicate that an action or process is currently in progress. They are commonly shown during data loading, form submission, page transitions, or background operations where immediate feedback is required.

This Spinner component is built with React and styled using Tailwind CSS. It supports multiple visual styles and sizes, making it easy to adapt to buttons, inline UI, or full-page loading states.

PreviewCode

Copy to clipboard

Types

Default

Dotted

Dotted Round

Sizes

Small

Medium

Large

XL

2XL

Installation

Usage

Import the component and render it where a loading state is needed.

import { Spinner } from "@/registry/core/spinner";

export default () => <Spinner />;

Examples

In Buttons

Use spinners inside buttons to indicate pending actions.

import { Button } from "@/registry/core/button";

<Button disabled>
  <Spinner size="sm" />
  Loading...
</Button>;

API Reference

Spinner

Sizes

• sm: 20px (1.25rem)
• md: 28px (1.75rem)
• lg: 36px (2.25rem)
• xl: 40px (2.5rem)
• xxl: 48px (3rem)

Accessibility

• Uses role="presentation" as the spinner is decorative
• Includes alt="Spinner" for context
• When used in buttons, ensure the button has descriptive text or aria-label
• Consider using aria-busy="true" on parent containers during loading states
• Animation respects prefers-reduced-motion through Tailwind's animate-spin

Notes

• Uses CSS animate-spin for smooth rotation animation
• Spinner images should be SVG format for crisp rendering at all sizes
• Three different visual styles available for different design contexts
• Commonly used in buttons, overlays, and page loading states
• Works well with the Button component's disabled state