• Overview
• Basic Usage
• Props
• Variants / Examples
  • Size Variants
  • Color Variants
  • Button Loading State
  • Livewire Loading Indicator
  • Centered Page Loader
  • Inline with Text
• Accessibility

Overview#

The <x-aura::spinner> component renders a circular spinning animation used to indicate that a process is in progress. It is lightweight and provides visual feedback during asynchronous operations such as data loading, form submission, or page transitions. The spinner includes a screen-reader-only text label for accessibility.

Basic Usage#

<x-aura::spinner />

Props#

Variants / Examples#

Size Variants#

<x-aura::spinner size="sm" />
<x-aura::spinner size="md" />
<x-aura::spinner size="lg" />
<x-aura::spinner size="xl" />

Color Variants#

<x-aura::spinner color="primary" />
<x-aura::spinner color="secondary" />
<x-aura::spinner color="success" />
<x-aura::spinner color="danger" />
<div class="bg-gray-800 p-4 inline-block rounded">
    <x-aura::spinner color="white" />
</div>

Button Loading State#

<x-aura::button disabled>
    <x-aura::spinner size="sm" color="white" />
    <span class="ml-2">Saving...</span>
</x-aura::button>

Livewire Loading Indicator#

<div wire:loading>
    <x-aura::spinner size="sm" />
    <span class="ml-2 text-sm">Loading...</span>
</div>

Centered Page Loader#

<div class="flex items-center justify-center min-h-[200px]">
    <div class="text-center">
        <x-aura::spinner size="xl" />
        <p class="mt-4 text-sm text-gray-500">Loading data...</p>
    </div>
</div>

Inline with Text#

<div class="flex items-center gap-2">
    <x-aura::spinner size="sm" color="primary" />
    <span class="text-sm">Processing your request...</span>
</div>

Accessibility#

• The component uses role="status" to announce the loading state to assistive technologies.
• An aria-label="Loading" attribute is set on the spinner container.
• A visually hidden <span class="sr-only">Loading...</span> element is included inside the spinner, providing fallback text for screen readers.