Spinner

PreviousNext

An animated loading spinner component with smooth circular rotation animation and built-in accessibility support

import { Spinner } from '@/ui/Spinner';

export function SpinnerDemo() {
  return <Spinner className="w-12" />;
}

Installation

npx shadcn@latest add https://develop.trident-ui.pro.clubmed/r/spinner.json

Usage

import { Spinner } from '@/docs/lib/ui/spinner';
 
export function Component() {
  return <Spinner className="w-12 h-12" />;
}

API Reference

Spinner

PropTypeDefaultDescription
classNamestringundefinedOptional CSS classes to apply to the spinner container for sizing and style

Notes

  • Accessibility: The Spinner includes built-in ARIA attributes (aria-busy="true", role="alert", aria-live="polite") to announce loading states to screen readers
  • Animation: Features two animations working together - a rotating SVG spinner and an animated stroke dasharray for smooth visual feedback
  • Sizing: Control the spinner size using the className prop with Tailwind width/height utilities (e.g., w-8, w-12, w-16)
  • SVG-Based: Renders as an SVG element that scales cleanly at any size without pixelation
  • Color Customization: The spinner uses a gray background circle (#CCCCCC) and black animated stroke. Colors can be customized via CSS by targeting the SVG circles
  • Loading States: Best used in combination with conditional rendering to show/hide based on loading state