Spinner

Loading indicator to show ongoing processes with multiple styles and sizes.

PreviewCode

Copy to clipboard

Types

Default

Dotted

Dotted Round

Sizes

Small

Medium

Large

XL

2XL

Installation

Usage

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

export default () => <Spinner />;

Examples

In Buttons

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