Loading

<span class="loading"></span>
<span class="loading color-primary"></span>
<span class="loading color-success"></span>
<span class="loading color-error"></span>

Requires: ux.min.css

<span class="inline-block size-6 rounded-full border-3 border-base-300 border-t-primary animate-spin"></span>
<span class="inline-block size-6 rounded-full border-3 border-base-300 border-t-primary animate-spin"></span>
<span class="inline-block size-6 rounded-full border-3 border-base-300 border-t-success animate-spin"></span>
<span class="inline-block size-6 rounded-full border-3 border-base-300 border-t-error animate-spin"></span>

Requires: tw.min.css

// No JavaScript required - pure CSS animation

<span class="loading loading-xs color-primary"></span>
<span class="loading loading-sm color-primary"></span>
<span class="loading color-primary"></span>
<span class="loading loading-lg color-primary"></span>
<span class="loading loading-xl color-primary"></span>

Requires: ux.min.css

<span class="inline-block size-4 rounded-full border-2 border-base-300 border-t-primary animate-spin"></span>
<span class="inline-block size-5 rounded-full border-2 border-base-300 border-t-primary animate-spin"></span>
<span class="inline-block size-6 rounded-full border-3 border-base-300 border-t-primary animate-spin"></span>
<span class="inline-block size-8 rounded-full border-3 border-base-300 border-t-primary animate-spin"></span>
<span class="inline-block size-12 rounded-full border-4 border-base-300 border-t-primary animate-spin"></span>

Requires: tw.min.css

// No JavaScript required - pure CSS animation

<span class="loading loading-dots color-primary">
  <span class="loading-dot"></span>
</span>

Requires: ux.min.css

<!-- Dot animation requires @keyframes - use semantic classes -->
<span class="loading loading-dots color-primary">
  <span class="loading-dot"></span>
</span>

Requires: tw.min.css

// No JavaScript required - pure CSS animation

<button class="btn color-primary btn-loading">Saving</button>
<button class="btn btn-outline color-primary btn-loading">Loading</button>

Requires: ux.min.css

<!-- Button loading uses .btn-loading from btn.css -->
<button class="btn color-primary btn-loading">Saving</button>
<button class="btn btn-outline color-primary btn-loading">Loading</button>

Requires: tw.min.css

// Toggle loading state:
btn.classList.toggle('btn-loading');