Loading Dots

Three blinking dots that indicate an action running in the background.

Usage

<twig:ui:LoadingDots />

Examples

Sizes

<div class="flex flex-wrap items-center gap-4">
    <twig:ui:LoadingDots size="sm" />
    <twig:ui:LoadingDots size="md" />
    <twig:ui:LoadingDots size="lg" />
    <twig:ui:LoadingDots size="xl" />
</div>

Color

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

With text

<p class="flex items-center text-sm text-neutral-800 dark:text-white">
    Loading<twig:ui:LoadingDots class="ml-1" />
</p>

API Reference

`<twig:ui:LoadingDots>`

Prop	Type	Description
`size`	`'sm'` \| `'md'` \| `'lg'` \| `'xl'`	The size of the dots. Defaults to `md`
`label`	`string`	The accessible label announced to assistive technologies. Defaults to `'Loading'`