Components / Spinner

Spinner

An animated loading indicator. Pure Tailwind: a lucide Loader2 icon with animate-spin that merges any consumer class to set its size and color.

Examples

Drop in a ZitsSpinner. It carries role="status" and an aria-label for screen readers.

razor

<ZitsSpinner />

Sizes

Override the size and color with class.

razor

<div class="flex items-center gap-4">
    <ZitsSpinner class="size-4" />
    <ZitsSpinner class="size-6" />
    <ZitsSpinner class="size-8 text-muted-foreground" />
</div>

Inside a button

Compose it with a button to show a pending state.

razor

<ZitsButton Disabled="true">
    <ZitsSpinner class="size-4" />
    Please wait
</ZitsButton>

Installation

Copy the component source into your project with the CLI.

Terminal bash

navius add spinner

API reference

Pass any extra attributes (including class); they are splatted onto the root svg and the class is merged.

Prop	Type	Default
class	string?	-