Skeleton
Displays a placeholder while content is loading
<dui-card class="w-full">
<dui-card-header>
<dui-skeleton class="h-4 w-2/3"/>
<dui-skeleton class="h-4 w-1/2"/>
</dui-card-header>
<dui-card-content>
<dui-skeleton class="aspect-square w-full"/>
</dui-card-content>
</dui-card>Usage
<dui-skeleton class="..." />By default, the Skeleton Tag Helper only defines the color and shimmering animation effect. The shape and outline of the skeleton is defined using Tailwind's width and height utility classes.
Examples
Avatar
<div class="flex w-full items-center gap-4">
<dui-skeleton class="size-10 shrink-0 rounded-full"/>
<div class="grid gap-2">
<dui-skeleton class="h-4 w-[150px]"/>
<dui-skeleton class="h-4 w-[100px]"/>
</div>
</div>Text
<div class="flex w-full flex-col gap-2">
<dui-skeleton class="h-4 w-full"/>
<dui-skeleton class="h-4 w-full"/>
<dui-skeleton class="h-4 w-3/4"/>
</div>Form
<div class="flex w-full flex-col gap-7">
<div class="flex flex-col gap-3">
<dui-skeleton class="h-4 w-20"/>
<dui-skeleton class="h-10 w-full"/>
</div>
<div class="flex flex-col gap-3">
<dui-skeleton class="h-4 w-24"/>
<dui-skeleton class="h-10 w-full"/>
</div>
<dui-skeleton class="h-9 w-24"/>
</div>Table
<div class="flex w-full flex-col gap-2">
<div class="flex gap-4">
<dui-skeleton class="h-4 flex-1"/>
<dui-skeleton class="h-4 w-24"/>
<dui-skeleton class="h-4 w-20"/>
</div>
<div class="flex gap-4">
<dui-skeleton class="h-4 flex-1"/>
<dui-skeleton class="h-4 w-24"/>
<dui-skeleton class="h-4 w-20"/>
</div>
<div class="flex gap-4">
<dui-skeleton class="h-4 flex-1"/>
<dui-skeleton class="h-4 w-24"/>
<dui-skeleton class="h-4 w-20"/>
</div>
</div>API Reference
<dui-skeleton>
The <dui-skeleton> tag helper renders a <div> element. It takes no
component-specific attributes and forwards any standard HTML attributes (such
as class) to the rendered element.