Spinner

Spinner Component

The Spinner component shows a rotating loading indicator with customizable size and color. It optionally supports a tooltip for additional context on hover.

Example Usage

<x-spinner tooltip="Loading..." color="primary" size="md" />

Props

• color (string, default: "primary")
  Sets the spinner color. Options: primary, secondary, info, success, warning, danger. Supports dark mode variants.

• size (string, default: "md")
  Controls the spinner size. Options: sm, md, lg, xl.

• tooltip (string|null)
  Optional tooltip text shown when hovering over the spinner.

Overview

This Spinner component provides a visually appealing, animated loading indicator using SVG and Tailwind CSS. It supports multiple colors and sizes, adapts to dark mode, and optionally shows a tooltip for accessibility or UX improvements.