Components
pinion-ui

Theme

Tune

Lang

Spinner

Loading indicator wrapping daisyUI 5 loading class. variant (spinner/dots/ring/bars/ball/infinity) × size (xs–xl) × color (8 colors) cover every "wait" scenario: inside buttons, full-page, cards, etc.

default (spinner + md + currentColor)

<x-spinner />

<span class="spinner spinner-spinner spinner-md" aria-label="Loading..."></span>

variant — spinner (default) / dots / ring / bars / ball / infinity

<x-spinner variant="spinner" />
<x-spinner variant="dots" />
<x-spinner variant="ring" />
<x-spinner variant="bars" />
<x-spinner variant="ball" />
<x-spinner variant="infinity" />

<span class="spinner spinner-spinner spinner-md" aria-label="Loading..."></span>
<span class="spinner spinner-dots spinner-md" aria-label="Loading..."></span>
<span class="spinner spinner-ring spinner-md" aria-label="Loading..."></span>
<span class="spinner spinner-bars spinner-md" aria-label="Loading..."></span>
<span class="spinner spinner-ball spinner-md" aria-label="Loading..."></span>
<span class="spinner spinner-infinity spinner-md" aria-label="Loading..."></span>

size — xs / sm / md (default) / lg / xl

<x-spinner size="xs" />
<x-spinner size="sm" />
<x-spinner size="md" />
<x-spinner size="lg" />
<x-spinner size="xl" />
<x-spinner variant="ring" size="xs" />
<x-spinner variant="ring" size="sm" />
<x-spinner variant="ring" size="md" />
<x-spinner variant="ring" size="lg" />
<x-spinner variant="ring" size="xl" />

<span class="spinner spinner-spinner spinner-xs" aria-label="Loading..."></span>
<span class="spinner spinner-spinner spinner-sm" aria-label="Loading..."></span>
<span class="spinner spinner-spinner spinner-md" aria-label="Loading..."></span>
<span class="spinner spinner-spinner spinner-lg" aria-label="Loading..."></span>
<span class="spinner spinner-spinner spinner-xl" aria-label="Loading..."></span>
<span class="spinner spinner-ring spinner-xs" aria-label="Loading..."></span>
<span class="spinner spinner-ring spinner-sm" aria-label="Loading..."></span>
<span class="spinner spinner-ring spinner-md" aria-label="Loading..."></span>
<span class="spinner spinner-ring spinner-lg" aria-label="Loading..."></span>
<span class="spinner spinner-ring spinner-xl" aria-label="Loading..."></span>

color — null (default = currentColor) / primary / secondary / accent / info / success / warning / error

<x-spinner />
<x-spinner color="primary" />
<x-spinner color="secondary" />
<x-spinner color="accent" />
<x-spinner color="info" />
<x-spinner color="success" />
<x-spinner color="warning" />
<x-spinner color="error" />

<span class="spinner spinner-spinner spinner-md" aria-label="Loading..."></span>
<span class="spinner spinner-spinner spinner-md text-primary" aria-label="Loading..."></span>
<span class="spinner spinner-spinner spinner-md text-secondary" aria-label="Loading..."></span>
<span class="spinner spinner-spinner spinner-md text-accent" aria-label="Loading..."></span>
<span class="spinner spinner-spinner spinner-md text-info" aria-label="Loading..."></span>
<span class="spinner spinner-spinner spinner-md text-success" aria-label="Loading..."></span>
<span class="spinner spinner-spinner spinner-md text-warning" aria-label="Loading..."></span>
<span class="spinner spinner-spinner spinner-md text-error" aria-label="Loading..."></span>

Combined

<x-spinner variant="ring" size="xl" color="success" />

<span class="spinner spinner-ring spinner-xl text-success" aria-label="Loading..."></span>

Inside a button

<x-button color="primary">
    <x-spinner size="sm" />
    Loading...
</x-button>
<x-button color="success" appearance="outline">
    <x-spinner size="sm" variant="dots" />
    Saving
</x-button>
<x-button color="neutral" appearance="soft" size="sm">
    <x-spinner size="xs" />
    Loading...
</x-button>
<x-button color="error" size="lg">
    <x-spinner size="sm" variant="ring" />
    Deleting...
</x-button>

<button class="inline-flex items-center justify-center whitespace-nowrap font-medium tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded-[var(--radius-field)] border-[length:var(--border)] h-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 bg-primary text-primary-content border-primary hover:bg-primary/90 focus-visible:ring-primary cursor-pointer"><span class="spinner spinner-spinner spinner-sm" aria-label="Loading..."></span> Loading...</button>
<button class="inline-flex items-center justify-center whitespace-nowrap font-medium tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded-[var(--radius-field)] border-[length:var(--border)] h-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 bg-transparent text-success border-success hover:bg-success hover:text-success-content focus-visible:ring-success cursor-pointer"><span class="spinner spinner-dots spinner-sm" aria-label="Loading..."></span> Saving</button>
<button class="inline-flex items-center justify-center whitespace-nowrap font-medium tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded-[var(--radius-field)] border-[length:var(--border)] h-[var(--h-field-sm)] px-[var(--px-field-sm)] text-[length:var(--text-field-sm)] gap-1.5 bg-base-content/10 text-base-content border-transparent hover:bg-base-content/20 focus-visible:ring-base-content cursor-pointer"><span class="spinner spinner-spinner spinner-xs" aria-label="Loading..."></span> Loading...</button>
<button class="inline-flex items-center justify-center whitespace-nowrap font-medium tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded-[var(--radius-field)] border-[length:var(--border)] h-[var(--h-field-lg)] px-[var(--px-field-lg)] text-[length:var(--text-field-lg)] gap-2.5 bg-error text-error-content border-error hover:bg-error/90 focus-visible:ring-error cursor-pointer"><span class="spinner spinner-ring spinner-sm" aria-label="Loading..."></span> Deleting...</button>