Spinner
Indicates a loading or busy state.
<div class="w-md">
<sa-item variant="Muted">
<sa-item-media>
<sa-spinner/>
</sa-item-media>
<sa-item-content>
<sa-item-title class="line-clamp-1">Processing payment...</sa-item-title>
</sa-item-content>
<sa-item-content class="flex-none justify-end">
<span class="text-sm tabular-nums">$100.00</span>
</sa-item-content>
</sa-item>
</div>Usage
<sa-spinner/>Examples
Size
Control the size with the Tailwind size utilities.
<sa-group align="Center">
<sa-spinner class="size-3"/>
<sa-spinner class="size-4"/>
<sa-spinner class="size-6"/>
<sa-spinner class="size-8"/>
</sa-group>Color
Control the color with the Tailwind text color utilities.
<sa-group>
<sa-spinner class="size-12 text-red-800"/>
<sa-spinner class="size-12 text-green-800"/>
<sa-spinner class="size-12 text-blue-800"/>
</sa-group>