Spinner

<div class="flex items-center gap-4">
  <div class="spinner spinner-xs"></div>
  <div class="spinner spinner-sm"></div>
  <div class="spinner"></div>
  <div class="spinner spinner-lg"></div>
  <div class="spinner spinner-xl"></div>
</div>

Requires: ux.min.css

<div class="flex items-center gap-4">
  <div class="inline-block size-[13px] border-2 border-primary/20 border-t-primary rounded-full animate-spin"></div>
  <div class="inline-block size-4 border-2 border-primary/20 border-t-primary rounded-full animate-spin"></div>
  <div class="inline-block size-6 border-3 border-primary/20 border-t-primary rounded-full animate-spin"></div>
  <div class="inline-block size-8 border-4 border-primary/20 border-t-primary rounded-full animate-spin"></div>
</div>

Requires: tw.min.css

// No JavaScript required — pure CSS animation

<div class="flex items-center gap-4">
  <div class="spinner color-primary"></div>
  <div class="spinner color-success"></div>
  <div class="spinner color-warning"></div>
  <div class="spinner color-error"></div>
  <div class="spinner color-info"></div>
  <div class="spinner spinner-white" style="background: #333; padding: 8px; border-radius: 8px;"></div>
</div>

Requires: ux.min.css

<div class="flex items-center gap-4">
  <div class="inline-block size-6 border-3 border-primary/20 border-t-primary rounded-full animate-spin"></div>
  <div class="inline-block size-6 border-3 border-success/20 border-t-success rounded-full animate-spin"></div>
  <div class="inline-block size-6 border-3 border-warning/20 border-t-warning rounded-full animate-spin"></div>
  <div class="inline-block size-6 border-3 border-error/20 border-t-error rounded-full animate-spin"></div>
</div>

Requires: tw.min.css

// Colors use --_spinner-color CSS variable, set by .color-* classes

<div class="flex items-center gap-8">
  <!-- Dots -->
  <div class="spinner spinner-dots">
    <span></span><span></span><span></span>
  </div>

  <!-- Bars -->
  <div class="spinner spinner-bars">
    <span></span><span></span><span></span><span></span>
  </div>
</div>

Requires: ux.min.css

<!-- Dots: 3 circles with staggered scale animation
     Bars: 4 vertical bars with staggered scaleY animation -->

Requires: tw.min.css

// No JavaScript required — pure CSS animation

<div class="flex items-center gap-6">
  <div class="spinner spinner-ios spinner-sm">
    <span></span><span></span><span></span><span></span><span></span>
    <span></span><span></span><span></span><span></span><span></span>
  </div>
  <div class="spinner spinner-ios">
    <span></span><span></span><span></span><span></span><span></span>
    <span></span><span></span><span></span><span></span><span></span>
  </div>
  <div class="spinner spinner-ios spinner-lg">
    <span></span><span></span><span></span><span></span><span></span>
    <span></span><span></span><span></span><span></span><span></span>
  </div>
</div>

Requires: ux.min.css

<!-- 12 radiating lines (::before, ::after + 10 spans) with stepped rotation,
     container rotates in 12 discrete steps -->

Requires: tw.min.css

// No JavaScript required — pure CSS animation

<!-- Centered with text -->
<div class="spinner-container">
  <div class="spinner spinner-lg"></div>
  <span class="spinner-container-text">Loading data...</span>
</div>

Requires: ux.min.css

<div class="flex flex-col items-center justify-center gap-3 p-6">
  <div class="inline-block size-8 border-4 border-primary/20 border-t-primary rounded-full animate-spin"></div>
  <span class="text-sm text-base-content/60">Loading data...</span>
</div>

Requires: tw.min.css

// Overlay: .spinner-overlay creates fixed fullscreen backdrop
// UX.lockScroll() recommended when showing overlay