Spinner

A lightweight loading indicator that provides visual feedback for asynchronous operations and loading states.

Import#

import { Spinner } from "asheeui";

Usage#

import { Spinner } from "asheeui";

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

Examples#

Basic spinner#

Size variants#

Color#

Custom speed#

With text#

Full page loading#

In button#

Center aligned#

Props#

* Falls back through Global Configuration if not set. See below.

Global Configuration#

Spinner reads defaults from four places, in this order of precedence:

1. Instance prop: set directly on <Spinner />
2. Component config: components.spinner in your ashee.config
3. Theme default: defaultColor in your ashee.config
4. Built-in fallback: component's internal default values

Component config#

// ashee.config.ts
import type { ExternalConfig } from "asheeui";

export const config: ExternalConfig = {
  components: {
    spinner: {
      size: "md",
      color: "primary",
      speed: "0.75s",
    },
  },
};

Built-in fallbacks#

{
  size: "md",
  color: "primary",
  speed: "0.75s",
  className: "",
}

Accessibility#

• Uses aria-hidden="true" to prevent screen reader announcement
• For loading states, use aria-busy or aria-live on parent containers
• Can be used with sr-only text to provide context for screen readers
• Respects reduced motion preferences when configured

Notes#

• Speed: The speed prop accepts any valid CSS animation duration value (e.g., "0.5s", "750ms").
• Color: The none color uses the background color, which is useful for dark overlays.
• SVG: The spinner is rendered as an SVG with standard SVG attributes support.
• Integration: The spinner is used internally in components like Button (loading state) and Input (isLoading state).
• Custom Animation: The spinner uses Tailwind's animate-spin class which can be customized globally.