Skeleton
Skeleton is a component that can be used to show a loading state of a component.
| Class name | Type | |
|---|---|---|
| skeleton | Component | A placeholder div with loading animation |
| skeleton-text | Modifier | Animates the text color instead of background color |
<div class="$$skeleton h-32 w-32"></div>
<div class="$$skeleton h-32 w-32"></div>
<div class="$$skeleton h-32 w-32"></div>
<div class="$$skeleton h-32 w-32"></div><div class="flex w-52 flex-col gap-4"> <div class="flex items-center gap-4"> <div class="$$skeleton h-16 w-16 shrink-0 rounded-full"></div> <div class="flex flex-col gap-4"> <div class="$$skeleton h-4 w-20"></div> <div class="$$skeleton h-4 w-28"></div> </div> </div> <div class="$$skeleton h-32 w-full"></div> </div>
<div class="flex w-52 flex-col gap-4">
<div class="flex items-center gap-4">
<div class="$$skeleton h-16 w-16 shrink-0 rounded-full"></div>
<div class="flex flex-col gap-4">
<div class="$$skeleton h-4 w-20"></div>
<div class="$$skeleton h-4 w-28"></div>
</div>
</div>
<div class="$$skeleton h-32 w-full"></div>
</div>
<div class="flex w-52 flex-col gap-4">
<div class="flex items-center gap-4">
<div class="$$skeleton h-16 w-16 shrink-0 rounded-full"></div>
<div class="flex flex-col gap-4">
<div class="$$skeleton h-4 w-20"></div>
<div class="$$skeleton h-4 w-28"></div>
</div>
</div>
<div class="$$skeleton h-32 w-full"></div>
</div>
<div class="flex w-52 flex-col gap-4">
<div class="flex items-center gap-4">
<div class="$$skeleton h-16 w-16 shrink-0 rounded-full"></div>
<div class="flex flex-col gap-4">
<div class="$$skeleton h-4 w-20"></div>
<div class="$$skeleton h-4 w-28"></div>
</div>
</div>
<div class="$$skeleton h-32 w-full"></div>
</div><div class="flex w-52 flex-col gap-4"> <div class="$$skeleton h-32 w-full"></div> <div class="$$skeleton h-4 w-28"></div> <div class="$$skeleton h-4 w-full"></div> <div class="$$skeleton h-4 w-full"></div> </div>
<div class="flex w-52 flex-col gap-4">
<div class="$$skeleton h-32 w-full"></div>
<div class="$$skeleton h-4 w-28"></div>
<div class="$$skeleton h-4 w-full"></div>
<div class="$$skeleton h-4 w-full"></div>
</div>
<div class="flex w-52 flex-col gap-4">
<div class="$$skeleton h-32 w-full"></div>
<div class="$$skeleton h-4 w-28"></div>
<div class="$$skeleton h-4 w-full"></div>
<div class="$$skeleton h-4 w-full"></div>
</div>
<div class="flex w-52 flex-col gap-4">
<div class="$$skeleton h-32 w-full"></div>
<div class="$$skeleton h-4 w-28"></div>
<div class="$$skeleton h-4 w-full"></div>
<div class="$$skeleton h-4 w-full"></div>
</div>AI is thinking harder...
<span class="$$skeleton $$skeleton-text">AI is thinking harder...</span>
<span class="$$skeleton $$skeleton-text">AI is thinking harder...</span>
<span class="$$skeleton $$skeleton-text">AI is thinking harder...</span>
<span class="$$skeleton $$skeleton-text">AI is thinking harder...</span>Do you have a question? Ask on GitHub or Discord server
Do you see a bug? open an issue on GitHub
Do you like daisyUI? Post about it!
Support daisyUI's development: Open Collective
