Spinner - Laravel Blade

Use the spinner component as a loading indicator built with SVG and Tailwind CSS, available in multiple colors and sizes.

<x-fwb.spinner />

<div class="flex flex-wrap gap-4">
    <x-fwb.spinner color="blue" />
    <x-fwb.spinner color="gray" />
    <x-fwb.spinner color="green" />
    <x-fwb.spinner color="red" />
    <x-fwb.spinner color="yellow" />
    <x-fwb.spinner color="pink" />
    <x-fwb.spinner color="purple" />
</div>

<div class="flex flex-wrap items-center gap-4">
    <x-fwb.spinner size="xs" />
    <x-fwb.spinner size="sm" />
    <x-fwb.spinner size="md" />
    <x-fwb.spinner size="lg" />
    <x-fwb.spinner size="xl" />
</div>

<div class="space-y-4">
    <div class="text-left">
        <x-fwb.spinner />
    </div>
    <div class="text-center">
        <x-fwb.spinner />
    </div>
    <div class="text-right">
        <x-fwb.spinner />
    </div>
</div>

<div class="flex flex-wrap gap-2">
    <x-fwb.button color="blue" :disabled="true">
        <x-fwb.spinner size="sm" color="white" class="me-3" />
        Loading...
    </x-fwb.button>
    <x-fwb.button color="dark" :disabled="true">
        <x-fwb.spinner size="sm" color="white" class="me-3" />
        Loading...
    </x-fwb.button>
</div>