data-theme = lofi
Spinner
加载指示器行内显示。包装 daisyUI 5 的 loading 类。variant(旋转/圆点/圆环/条纹/球/无穷)× size(xs〜xl)× color(8 色)组合,表达按钮内、整页或卡片等一切"等待时间"。
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
<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>
data-theme = night
Spinner
加载指示器行内显示。包装 daisyUI 5 的 loading 类。variant(旋转/圆点/圆环/条纹/球/无穷)× size(xs〜xl)× color(8 色)组合,表达按钮内、整页或卡片等一切"等待时间"。
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
<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>