Spinner
Indicates a loading or busy state
Theme
<div class="w-full max-w-md">
<sa-item variant="ItemVariant.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
Renders an animated loading indicator. Its size and color follow the surrounding text unless overridden with utility classes.
<sa-spinner/>Examples
Size
Control the size with the Tailwind size utilities.
Theme
<sa-group align="GroupAlign.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.
Theme
<sa-group>
<sa-spinner class="size-12 text-red-600"/>
<sa-spinner class="size-12 text-green-600"/>
<sa-spinner class="size-12 text-blue-600"/>
</sa-group>In buttons
Place an <sa-spinner> inside a button to show a pending action.
Theme
<div class="flex flex-wrap items-center gap-4">
<sa-button>
<sa-spinner/>
Submit
</sa-button>
<sa-button disabled>
<sa-spinner/>
Disabled
</sa-button>
<sa-button variant="ButtonVariant.Outline" disabled>
<sa-spinner/>
Outline
</sa-button>
<sa-button variant="ButtonVariant.Outline" size="ButtonSize.Icon" disabled>
<sa-spinner/>
<span class="sr-only">Loading...</span>
</sa-button>
</div>In badges
A spinner inside a badge, in each variant.
Theme
<div class="flex flex-wrap items-center justify-center gap-4">
<sa-badge>
<sa-spinner/>
Badge
</sa-badge>
<sa-badge variant="BadgeVariant.Secondary">
<sa-spinner/>
Badge
</sa-badge>
<sa-badge variant="BadgeVariant.Destructive">
<sa-spinner/>
Badge
</sa-badge>
<sa-badge variant="BadgeVariant.Outline">
<sa-spinner/>
Badge
</sa-badge>
</div>In an input group
A spinner in an input group addon shows that the field is busy.
Theme
<sa-field>
<sa-field-label for="input-group-spinner">Input Group</sa-field-label>
<sa-input-group>
<sa-input-group-input id="input-group-spinner"/>
<sa-input-group-addon>
<sa-spinner/>
</sa-input-group-addon>
</sa-input-group>
</sa-field>In an empty state
A spinner as the media of an empty state while content loads.
Theme
<sa-empty class="min-h-[300px]">
<sa-empty-header>
<sa-empty-media variant="EmptyMediaVariant.Icon">
<sa-spinner/>
</sa-empty-media>
<sa-empty-title>No trips yet</sa-empty-title>
<sa-empty-description>
You haven't planned any trips yet. Get started by creating
your first trip.
</sa-empty-description>
</sa-empty-header>
<sa-empty-content>
<div class="flex gap-2">
<sa-linkbutton href="#">
Plan a trip
</sa-linkbutton>
<sa-button variant="ButtonVariant.Outline">
Import booking
</sa-button>
</div>
<sa-linkbutton variant="ButtonVariant.Link" href="#" class="text-muted-foreground">
Learn more
<sa-icon name="arrow-right"/>
</sa-linkbutton>
</sa-empty-content>
</sa-empty>API Reference
<sa-spinner>
Renders an <svg> element containing a spinner icon, with role="status" and aria-label="Loading" applied.