Spinner

<x-spinner />

<x-spinner ring />
<x-spinner throbber />
<x-spinner gradient />
<x-spinner ping />
<x-spinner dots />
<x-spinner pulse />
<x-spinner typing />
<x-spinner bars />
<x-spinner wave />

<x-spinner shimmer text="Loading the report" />
<x-spinner caret text="Generating" />
<x-spinner terminal text="npm run build" />
<x-spinner thinking />

<x-spinner xs />
<x-spinner sm />
<x-spinner md />
<x-spinner lg />

<x-spinner color="red" />
<x-spinner bars color="emerald" />
<x-spinner wave color="amber" />
<x-spinner dots color="blue" />
 
<!-- Anything outside the palette comes straight from a utility -->
<x-spinner class="text-[#ff5f1f]" />

<!-- glyph + sr-only fallback -->
<x-spinner />
 
<!-- glyph + visible label -->
<x-spinner text="Sending the file" />
 
<!-- glyph + markup label -->
<x-spinner>Sending <b>3</b> files</x-spinner>

<x-spinner thinking />
<x-spinner thinking text="Analyzing" />
<x-spinner thinking :text="false" />
<x-spinner thinking :interval="250" />

<x-button color="primary">
    <x-slot:left>
        <x-spinner xs class="text-white" />
    </x-slot:left>
    Saving
</x-button>