Start building

Platform

Open Source

Resources

Sign in

Spinner

x-spinner

An accessible loading indicator in four sizes — the same spinner the button uses, available anywhere.

php artisan components:add spinner

Examples

Sizes & tinting

Four sizes, tinted with any text color utility.

<div class="flex flex-wrap items-center justify-center gap-8">
    <x-components.spinner size="xs" />
    <x-components.spinner size="sm" />
    <x-components.spinner />
    <x-components.spinner size="lg" />
    <x-components.spinner class="text-primary" />
    <span class="inline-flex items-center gap-2 text-sm text-foreground/60">
        <x-components.spinner size="sm" />
        Saving changes…
    </span>
</div>

Props

Prop Type Default Description
size select xs · sm · md · lg md The diameter of the spinner.
label text Loading… Screen-reader label announced while loading.