Spinner
Open in
Default Spinner
Custom Colors
Sizes
Speeds
Slow
Default
Fast
Custom Stroke Width
1px
3px (default)
5px
Loading Button

Features

  • Built with React forwardRef for proper ref handling
  • Variant-based sizing (sm, default, lg, xl)
  • Configurable animation speed (slow, default, fast)
  • Customizable stroke width and colors
  • Accessible background circle with configurable opacity
  • Uses CSS currentColor for easy theming
  • Smooth rotation animation with CSS
  • Fully typed with TypeScript
  • Extends native SVG props for full flexibility

Component Props

Spinner

  • size - "sm" | "default" | "lg" | "xl" - Size variant (default: "default")
  • speed - "slow" | "default" | "fast" - Animation speed (default: "default")
  • strokeWidth - number - Width of the spinner stroke (default: 3)
  • bgClassName - string - CSS class for the background circle (default: "stroke-muted-foreground/20")
  • className - string - Additional CSS classes
  • ...props - All native SVG element props are supported