Loading Spinner

Standalone loading spinner with size variants and custom colors

Overview

LoadingSpinner provides a standalone animated spinner for loading states. It wraps Font Awesome's spinner icon with accessibility support including role='status' and aria-label attributes.

Key Features

Three size variants: sm (16px), default (24px), lg (32px)
Uses primary brand color by default
Customizable colors via className (text-success, text-destructive, etc.)
Built-in accessibility with role='status' and screen reader text

Examples

Size Variants

Three sizes available: sm for inline text, default for buttons and cards, lg for page-level loading states.

sm (16px)

default (24px)

lg (32px)

xl (48px)

2xl (64px)

Custom Colors

Override the default primary color using semantic text classes.

Primary (default)

Success

Warning

Destructive

Centered Loading State

Common pattern: center the spinner in a container for page-level or section loading states.

Props Reference

Prop	Type	Default	Description
`size`	`"sm" \| "default" \| "lg" \| "xl" \| "2xl"`	`"default"`	Spinner size: 'sm' (16px), 'default' (24px), or 'lg' (32px)
`className`	`string`	`-`	Additional CSS classes (use text-* for colors)

Usage

import { LoadingSpinner } from '@/ui/components';

// Default size and color
<LoadingSpinner />

// Size variants
<LoadingSpinner size="sm" />      // 16px
<LoadingSpinner size="default" /> // 24px
<LoadingSpinner size="lg" />      // 32px
<LoadingSpinner size="xl" />      // 48px
<LoadingSpinner size="2xl" />     // 64px (full screen loader)

// Custom colors via className
<LoadingSpinner className="text-success" />
<LoadingSpinner className="text-warning" />
<LoadingSpinner className="text-destructive" />

// Full screen loading state
<div className="flex h-screen items-center justify-center">
  <LoadingSpinner size="2xl" />
</div>

Prop

Type

Default

Description

size

"sm" | "default" | "lg" | "xl" | "2xl"

"default"

Spinner size: 'sm' (16px), 'default' (24px), or 'lg' (32px)

className

string

-

Additional CSS classes (use text-* for colors)

import { LoadingSpinner } from '@/ui/components'; // Default size and color <LoadingSpinner /> // Size variants <LoadingSpinner size="sm" /> // 16px <LoadingSpinner size="default" /> // 24px <LoadingSpinner size="lg" /> // 32px <LoadingSpinner size="xl" /> // 48px <LoadingSpinner size="2xl" /> // 64px (full screen loader) // Custom colors via className <LoadingSpinner className="text-success" /> <LoadingSpinner className="text-warning" /> <LoadingSpinner className="text-destructive" /> // Full screen loading state <div className="flex h-screen items-center justify-center"> <LoadingSpinner size="2xl" /> </div>