Spinner

Default

{ui spinner /}

The spinner is a span with role="status", and label is its accessible name, so a screen reader announces it when it appears. It draws with CSS alone and keeps turning with no script. Under prefers-reduced-motion it turns slowly instead of stopping, so it still reads as busy.

Sizes

<div class="flex items-center gap-4">
	{ui spinner, size: 'sm' /}
	{ui spinner /}
	{ui spinner, size: 'lg' /}
</div>

The size is the width and height of the ring, set by --spinner-size. Like a button, size has both spellings: the param for a fixed size, and the class spinner-lg when it changes by breakpoint.

To show it while HTMX loads, put it in an element with the htmx-indicator class and point hx-indicator at it. The server still returns the final HTML; the spinner is only the wait.

Beside a disabled button

<div class="flex items-center gap-3">
	{ui button,
		title: 'Saving',
		variant: 'outline',
		disabled: true,
	/}
	{ui spinner, size: 'sm', label: 'Saving' /}
</div>

Param	Default	Description
label	'Loading'	the accessible name, read by screen readers
size	null	sm or lg
class	''	added to spinner
attrs	[]	any other attributes, e.g. ['id' => 'busy']

Params