Skeleton
Skeleton is a component that can be used to show a loading state of a component.
This page is not up to date. Some of the examples might not work as expected.
| Class name | Type | |
|---|---|---|
| skeleton | Component | A placeholder div with loading animation |
<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>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
