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>