Loader

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

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

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

<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>

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

<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>