Skip to main content
The Loader component displays an animated spinning indicator for loading states.

​
Preview

​
Usage

<x-shopper::loader class="size-5" />

​
Attributes

The loader accepts standard HTML attributes that are merged with Tailwind classes:
​
class
string
default:"size-5 animate-spin"
CSS classes to customize size and animation. Common sizes: size-4, size-5, size-6.

​
Examples

​
Different Sizes

<x-shopper::loader class="size-4" />
<x-shopper::loader class="size-5" />
<x-shopper::loader class="size-6" />

​
With Color

<x-shopper::loader class="size-5 text-primary-500" />
<x-shopper::loader class="size-5 text-gray-400" />

​
In a Button

<x-filament::button wire:loading.attr="disabled">
    <x-shopper::loader wire:loading class="size-4 mr-2" />
    <span wire:loading.remove>Save</span>
    <span wire:loading>Saving...</span>
</x-filament::button>

​
Loading State

<div wire:loading.flex class="items-center justify-center py-8">
    <x-shopper::loader class="size-8 text-primary-500" />
</div>

​
Blade Component Source

<svg
    {{ $attributes->twMerge(['class' => 'size-5 animate-spin']) }}
    fill="none"
    viewBox="0 0 24 24"
    aria-hidden="true"
>
    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
    <path
        class="opacity-75"
        fill="currentColor"
        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
    />
</svg>