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.

Installation

npx @tailgrids/cli add spinner

Usage

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

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

export default function SpinnerExample() {
  return <Spinner />;
}

Examples

Types

The Spinner component has default, dotted, and dotted-round types.

Sizes

The Spinner component supports five pre-defined sizes: sm, md, lg, xl, and xxl.

In Buttons

Spinners can be integrated into buttons to provide visual feedback during loading or pending actions.

Custom

You can customize the spinner's behavior and appearance using Tailwind CSS utility classes.

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