Loading

Visual indicators for processes in progress.

<.loading />

Variants

Choose from multiple loading indicator styles to match your design language.

<.loading />
<.loading variant="ring-bg" />
<.loading variant="dots-bounce" />
<.loading variant="dots-fade" />
<.loading variant="dots-scale" />

Customization

Adjust the loading component's colors and sizes for various contexts.

<.loading class="size-8 text-zinc-500" />
<.loading variant="ring-bg" class="size-8 text-red-500" />
<.loading variant="dots-bounce" class="size-8 text-green-500" />

Duration

Control the animation duration of loading indicators for perceived experience.

<.loading class="size-8" duration={300} />
<.loading class="size-8" variant="ring-bg" duration={600} />
<.loading class="size-8" variant="dots-bounce" duration={1000} />