Phara UI

Phara UI v2.x

Spinner

A loading indicator with four animation variants, four sizes, and multiple colour options. Fully accessible with a screen-reader role="status" and aria-label.

Variants

Four animation styles to suit different contexts: a rotating ring, bouncing dots, equalizer bars, and a sonar pulse.

Ring

Dots

Bars

Pulse

Blade

<x-ui::spinner variant="ring" />
<x-ui::spinner variant="dots" />
<x-ui::spinner variant="bars" />
<x-ui::spinner variant="pulse" />

Sizes

Four sizes to match the surrounding UI density. All four variants scale uniformly.

Blade

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

Colors

Use color="white" on dark backgrounds, color="current" to inherit the parent text colour.

Primary

Zinc

White

Current

Blade

<x-ui::spinner color="primary" />
<x-ui::spinner color="zinc" />

{{-- On a dark background --}}
<div class="bg-zinc-900 p-4 rounded-xl">
    <x-ui::spinner color="white" />
</div>

{{-- Inherit the parent text color --}}
<span class="text-violet-600">
    <x-ui::spinner color="current" />
</span>

With Label

Pass a label to show visible text next to the spinner. Without a label the text is still present as sr-only for screen readers.

Loading… Fetching data… Processing… Connecting…

Blade

<x-ui::spinner label="Loading…" />
<x-ui::spinner variant="dots" label="Fetching data…" />
<x-ui::spinner variant="bars" label="Processing…" color="zinc" />

In Context

Common placements: inside a disabled button, inline with text, or as a full-page overlay with Livewire's wire:loading.

Inside a button

Use size="sm" color="current" to match the button's text colour.

Inline with text

Place next to status messages or form feedback.

Syncing changes… Uploading file…

Card overlay

Overlay a container while data loads, then replace with content.

Loading…

Full-page Livewire overlay

Use wire:loading on a fixed backdrop to block the UI during long requests.

Blade

Blade

{{-- Inside a button --}}
<x-ui::button disabled>
    <x-ui::spinner size="sm" color="current" />
    Saving…
</x-ui::button>

{{-- Inline within text --}}
<p class="flex items-center gap-2 text-sm text-zinc-500">
    <x-ui::spinner size="sm" color="zinc" />
    Syncing changes…
</p>

{{-- Full-page overlay (Livewire wire:loading) --}}
<div wire:loading class="fixed inset-0 z-50 flex items-center justify-center bg-white/80 dark:bg-zinc-900/80 backdrop-blur-sm">
    <x-ui::spinner size="xl" label="Loading…" />
</div>