ContextQMD
Back to Daisyui

Loading

packages/docs/src/routes/(routes)/components/loading/+page.md

5.5.194.7 KB
Original Source
<script> import Component from "$components/Component.svelte" import Translate from "$components/Translate.svelte" </script>

~Loading spinner

<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>

html
<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>

~Loading dots

<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-xl"></span>

html
<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-xl"></span>

~Loading ring

<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-xl"></span>

html
<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-xl"></span>

~Loading ball

<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-xl"></span>

html
<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-xl"></span>

~Loading bars

<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-xl"></span>

html
<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-xl"></span>

~Loading infinity

<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-xl"></span>

html
<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-xl"></span>

~Loading with colors

<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>

html
<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>