Loading
Loading shows an animation to indicate that something is loading.
This page is not up to date. Some of the examples might not work as expected.
| Class name | Type | |
|---|---|---|
| loading | Component | Loading element |
| loading-spinner | Style | spinner animation |
| loading-dots | Style | dots animation |
| loading-ring | Style | ring animation |
| loading-ball | Style | ball animation |
| loading-bars | Style | bars animation |
| loading-infinity | Style | infinity animation |
| loading-xs | Size | Extra small size |
| loading-sm | Size | Small size |
| loading-md | Size | Medium size (default) |
| loading-lg | Size | Large size |
| loading-xl | Size | Extra large size |
<span class="$$loading $$loading-spinner $$loading-xs"></span> <span class="$$loading $$loading-spinner $$loading-sm"></span> <span class="$$loading $$loading-spinner $$loading-md"></span> <span class="$$loading $$loading-spinner $$loading-lg"></span> <span class="$$loading $$loading-spinner $$loading-xl"></span>
<span class="$$loading $$loading-spinner $$loading-xs"></span>
<span class="$$loading $$loading-spinner $$loading-sm"></span>
<span class="$$loading $$loading-spinner $$loading-md"></span>
<span class="$$loading $$loading-spinner $$loading-lg"></span>
<span class="$$loading $$loading-spinner $$loading-xl"></span>
<span class="$$loading $$loading-spinner $$loading-xs"></span>
<span class="$$loading $$loading-spinner $$loading-sm"></span>
<span class="$$loading $$loading-spinner $$loading-md"></span>
<span class="$$loading $$loading-spinner $$loading-lg"></span>
<span class="$$loading $$loading-spinner $$loading-xl"></span>
<span class="$$loading $$loading-spinner $$loading-xs"></span>
<span class="$$loading $$loading-spinner $$loading-sm"></span>
<span class="$$loading $$loading-spinner $$loading-md"></span>
<span class="$$loading $$loading-spinner $$loading-lg"></span>
<span class="$$loading $$loading-spinner $$loading-xl"></span><span class="$$loading $$loading-dots $$loading-xs"></span> <span class="$$loading $$loading-dots $$loading-sm"></span> <span class="$$loading $$loading-dots $$loading-md"></span> <span class="$$loading $$loading-dots $$loading-lg"></span>
<span class="$$loading $$loading-dots $$loading-xs"></span>
<span class="$$loading $$loading-dots $$loading-sm"></span>
<span class="$$loading $$loading-dots $$loading-md"></span>
<span class="$$loading $$loading-dots $$loading-lg"></span>
<span class="$$loading $$loading-dots $$loading-xs"></span>
<span class="$$loading $$loading-dots $$loading-sm"></span>
<span class="$$loading $$loading-dots $$loading-md"></span>
<span class="$$loading $$loading-dots $$loading-lg"></span>
<span class="$$loading $$loading-dots $$loading-xs"></span>
<span class="$$loading $$loading-dots $$loading-sm"></span>
<span class="$$loading $$loading-dots $$loading-md"></span>
<span class="$$loading $$loading-dots $$loading-lg"></span><span class="$$loading $$loading-ring $$loading-xs"></span> <span class="$$loading $$loading-ring $$loading-sm"></span> <span class="$$loading $$loading-ring $$loading-md"></span> <span class="$$loading $$loading-ring $$loading-lg"></span>
<span class="$$loading $$loading-ring $$loading-xs"></span>
<span class="$$loading $$loading-ring $$loading-sm"></span>
<span class="$$loading $$loading-ring $$loading-md"></span>
<span class="$$loading $$loading-ring $$loading-lg"></span>
<span class="$$loading $$loading-ring $$loading-xs"></span>
<span class="$$loading $$loading-ring $$loading-sm"></span>
<span class="$$loading $$loading-ring $$loading-md"></span>
<span class="$$loading $$loading-ring $$loading-lg"></span>
<span class="$$loading $$loading-ring $$loading-xs"></span>
<span class="$$loading $$loading-ring $$loading-sm"></span>
<span class="$$loading $$loading-ring $$loading-md"></span>
<span class="$$loading $$loading-ring $$loading-lg"></span><span class="$$loading $$loading-ball $$loading-xs"></span> <span class="$$loading $$loading-ball $$loading-sm"></span> <span class="$$loading $$loading-ball $$loading-md"></span> <span class="$$loading $$loading-ball $$loading-lg"></span>
<span class="$$loading $$loading-ball $$loading-xs"></span>
<span class="$$loading $$loading-ball $$loading-sm"></span>
<span class="$$loading $$loading-ball $$loading-md"></span>
<span class="$$loading $$loading-ball $$loading-lg"></span>
<span class="$$loading $$loading-ball $$loading-xs"></span>
<span class="$$loading $$loading-ball $$loading-sm"></span>
<span class="$$loading $$loading-ball $$loading-md"></span>
<span class="$$loading $$loading-ball $$loading-lg"></span>
<span class="$$loading $$loading-ball $$loading-xs"></span>
<span class="$$loading $$loading-ball $$loading-sm"></span>
<span class="$$loading $$loading-ball $$loading-md"></span>
<span class="$$loading $$loading-ball $$loading-lg"></span><span class="$$loading $$loading-bars $$loading-xs"></span> <span class="$$loading $$loading-bars $$loading-sm"></span> <span class="$$loading $$loading-bars $$loading-md"></span> <span class="$$loading $$loading-bars $$loading-lg"></span>
<span class="$$loading $$loading-bars $$loading-xs"></span>
<span class="$$loading $$loading-bars $$loading-sm"></span>
<span class="$$loading $$loading-bars $$loading-md"></span>
<span class="$$loading $$loading-bars $$loading-lg"></span>
<span class="$$loading $$loading-bars $$loading-xs"></span>
<span class="$$loading $$loading-bars $$loading-sm"></span>
<span class="$$loading $$loading-bars $$loading-md"></span>
<span class="$$loading $$loading-bars $$loading-lg"></span>
<span class="$$loading $$loading-bars $$loading-xs"></span>
<span class="$$loading $$loading-bars $$loading-sm"></span>
<span class="$$loading $$loading-bars $$loading-md"></span>
<span class="$$loading $$loading-bars $$loading-lg"></span><span class="$$loading $$loading-infinity $$loading-xs"></span> <span class="$$loading $$loading-infinity $$loading-sm"></span> <span class="$$loading $$loading-infinity $$loading-md"></span> <span class="$$loading $$loading-infinity $$loading-lg"></span>
<span class="$$loading $$loading-infinity $$loading-xs"></span>
<span class="$$loading $$loading-infinity $$loading-sm"></span>
<span class="$$loading $$loading-infinity $$loading-md"></span>
<span class="$$loading $$loading-infinity $$loading-lg"></span>
<span class="$$loading $$loading-infinity $$loading-xs"></span>
<span class="$$loading $$loading-infinity $$loading-sm"></span>
<span class="$$loading $$loading-infinity $$loading-md"></span>
<span class="$$loading $$loading-infinity $$loading-lg"></span>
<span class="$$loading $$loading-infinity $$loading-xs"></span>
<span class="$$loading $$loading-infinity $$loading-sm"></span>
<span class="$$loading $$loading-infinity $$loading-md"></span>
<span class="$$loading $$loading-infinity $$loading-lg"></span><span class="$$loading $$loading-spinner text-primary"></span> <span class="$$loading $$loading-spinner text-secondary"></span> <span class="$$loading $$loading-spinner text-accent"></span> <span class="$$loading $$loading-spinner text-neutral"></span> <span class="$$loading $$loading-spinner text-info"></span> <span class="$$loading $$loading-spinner text-success"></span> <span class="$$loading $$loading-spinner text-warning"></span> <span class="$$loading $$loading-spinner text-error"></span>
<span class="$$loading $$loading-spinner text-primary"></span>
<span class="$$loading $$loading-spinner text-secondary"></span>
<span class="$$loading $$loading-spinner text-accent"></span>
<span class="$$loading $$loading-spinner text-neutral"></span>
<span class="$$loading $$loading-spinner text-info"></span>
<span class="$$loading $$loading-spinner text-success"></span>
<span class="$$loading $$loading-spinner text-warning"></span>
<span class="$$loading $$loading-spinner text-error"></span>
<span class="$$loading $$loading-spinner text-primary"></span>
<span class="$$loading $$loading-spinner text-secondary"></span>
<span class="$$loading $$loading-spinner text-accent"></span>
<span class="$$loading $$loading-spinner text-neutral"></span>
<span class="$$loading $$loading-spinner text-info"></span>
<span class="$$loading $$loading-spinner text-success"></span>
<span class="$$loading $$loading-spinner text-warning"></span>
<span class="$$loading $$loading-spinner text-error"></span>
<span class="$$loading $$loading-spinner text-primary"></span>
<span class="$$loading $$loading-spinner text-secondary"></span>
<span class="$$loading $$loading-spinner text-accent"></span>
<span class="$$loading $$loading-spinner text-neutral"></span>
<span class="$$loading $$loading-spinner text-info"></span>
<span class="$$loading $$loading-spinner text-success"></span>
<span class="$$loading $$loading-spinner text-warning"></span>
<span class="$$loading $$loading-spinner text-error"></span>Do you have a question? ask the community
Do you see a bug? open an issue on GitHub
Do you like daisyUI? tweet about it!
Support daisyUI's development: Open Collective
