Spinner

Animated loading indicator for asynchronous operations. Supports multiple sizes and color variants for different contexts.

Sizes

Spinners come in three sizes: small (16px), medium (24px), and large (32px).

Small (16px)

Medium (24px)

Large (32px)

Color Variants

Spinners support multiple color variants to match different contexts and backgrounds.

Primary

Secondary

Neutral

Success

Warning

Error

On Dark Backgrounds

Use on-primary or on-secondary colors for spinners on dark backgrounds.

On Primary Background

On Secondary Background

Usage in Buttons

Spinners are commonly used in buttons to indicate loading states.

Use Cases

Loading Data

Loading risk data...

Inline Loading

Fetching latest alerts...

Form Submission

Accessibility

Uses role="status" for proper ARIA semantics
Includes aria-label="Loading" for screen readers
Hidden "Loading..." text for screen reader users
Animation respects prefers-reduced-motion settings
Sufficient color contrast in all variants (WCAG AA compliant)
When used in buttons, ensure button has descriptive text or aria-label

Props

Prop	Type	Default	Description
size	string	'md'	sm (16px), md (24px), lg (32px)
color	string	'primary'	primary, secondary, neutral, on-primary, on-secondary, success, warning, error
class	string	''	Additional CSS classes

Usage Example


<x-building-blocks.spinner />


<x-building-blocks.spinner size="lg" color="primary" />


<button class="flex items-center gap-2 px-4 py-2 bg-primary-500 text-white rounded-lg">
    <x-building-blocks.spinner size="sm" color="on-primary" />
    <span>Loading...</span>
</button>


<div class="flex flex-col items-center gap-3">
    <x-building-blocks.spinner size="lg" />
    <p>Loading data...</p>
</div>