Spinner

An indicator that content is loading.

Usage

<twig:ui:Spinner />

Examples

Sizes

<div class="flex flex-wrap items-center gap-4">
    <twig:ui:Spinner class="size-3" />
    <twig:ui:Spinner class="size-4" />
    <twig:ui:Spinner class="size-6" />
    <twig:ui:Spinner class="size-8" />
</div>

Color

<div class="flex flex-wrap items-center gap-4">
    <twig:ui:Spinner class="text-neutral-950 dark:text-white" />
    <twig:ui:Spinner class="text-blue-500" />
    <twig:ui:Spinner class="text-green-500" />
    <twig:ui:Spinner class="text-red-500" />
</div>

Custom icon

<div class="flex flex-wrap items-center gap-4">
    <twig:ui:Spinner icon="lucide:loader" />
    <twig:ui:Spinner icon="lucide:loader-circle" />
</div>

In a button

<twig:ui:Button disabled>
    <twig:ui:Spinner data-icon="inline-start" />
    Please wait
</twig:ui:Button>

API Reference

`<twig:ui:Spinner>`

Prop	Type	Description
`icon`	`string`	The icon to spin. Defaults to `'lucide:loader-2'`
`label`	`string`	The accessible label announced to assistive technologies. Defaults to `'Loading'`