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 単独表示 — variant=spinner, size=md, color=null
variants — spinner / dots / ring / bars / ball / infinity
spinner
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" />size variants — xs / sm / md / lg / xl
xs
sm
md
lg
xl
xs
sm
md
lg
xl
<x-spinner size="xs" />
<x-spinner size="sm" />
<x-spinner size="md" /> {{-- default --}}
<x-spinner size="lg" />
<x-spinner size="xl" />color variants — default / primary / secondary / accent / info / success / warning / error
default
primary
secondary
accent
info
success
warning
error
<x-spinner /> {{-- default (currentColor) --}}
<x-spinner color="primary" />
<x-spinner color="success" />
<x-spinner color="error" />real-world example — button 内 spinner
<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>使い方
{{-- default (spinner + md + currentColor) --}}
<x-spinner />
{{-- variant: spinner (default) / dots / ring / bars / ball / infinity --}}
<x-spinner variant="ring" />
{{-- size: xs / sm / md (default) / lg / xl --}}
<x-spinner size="lg" />
{{-- color: null (default = currentColor) / primary / secondary / accent / info / success / warning / error --}}
<x-spinner color="primary" />
{{-- 組み合わせ --}}
<x-spinner variant="ring" size="xl" color="success" />
{{-- button 内 --}}
<x-button color="primary">
<x-spinner size="sm" />
Loading...
</x-button>