Spinner

35 · UI elements

Shows a loading state while an operation runs. On buttons, use the loading prop of acun:button, and to lock an area, use acun:loading-overlay; the spinner is for everywhere else.

acun:spinner

Sizes

size sets the diameter of the indicator; the default is md. sm suits a spot next to a line of text, and lg the middle of an empty area.

LIVE EXAMPLE

<div class="flex flex-wrap items-center gap-6">
    <acun:spinner size="sm" />
    <acun:spinner />
    <acun:spinner size="lg" />
</div>

Prop	Values
`size`	sm \| md \| lg

Types

The default border is a spinning ring; grow is a dot that grows and fades. With reduced motion turned on, the ring spins slowly and the dot stays still.

LIVE EXAMPLE

<div class="flex flex-wrap items-center gap-6">
    <acun:spinner />
    <acun:spinner type="grow" />
</div>

Prop	Values
`type`	border \| grow

Colors

The indicator uses the text color, which defaults to the brand color. For another color, give it a text-* class.

LIVE EXAMPLE

<div class="flex flex-wrap items-center gap-6">
    <acun:spinner class="text-emerald-600" />
    <acun:spinner class="text-amber-500" />
    <acun:spinner class="text-red-600" type="grow" />
    <acun:spinner class="text-gray-400" type="grow" />
</div>

Prop	Values
`class`	text-* color class

Screen reader text

The indicator has role="status" and gives screen readers a visually hidden text, "Loading" by default. Say what is loading with label.

LIVE EXAMPLE

<acun:spinner label="Loading the customer list" />

Prop	Values
`label`	Screen reader text

API

Props and slots

The values the component accepts.

Prop	Default	Description
`size`	`md`	sm · md · lg
`type`	`border`	border · grow
`label`	`Loading`	Screen reader text
`color`	`primary`	primary · secondary · success · danger · warning · info · dark