Skeleton

Loading placeholders for content while it's being loaded

Basic

Basic Skeleton

Preview Code Auto

Div(cls='skeleton h-32 w-32')

Circle with Content

Preview Code Auto

Div(
    Div(
        Div(cls="skeleton h-16 w-16 shrink-0 rounded-full"),
        Div(
            Div(cls="skeleton h-4 w-20"),
            Div(cls="skeleton h-4 w-28"),
            cls="flex flex-col gap-4"
        ),
        cls="flex items-center gap-4"
    ),
    Div(cls="skeleton h-32 w-full"),
    cls="flex w-52 flex-col gap-4"
)

Rectangle with Content

Preview Code Auto

Div(
    Div(cls='skeleton h-32 w-full'),
    Div(cls='skeleton h-4 w-28'),
    Div(cls='skeleton h-4 w-full'),
    Div(cls='skeleton h-4 w-full'),
    cls='flex w-52 flex-col gap-4'
)

Class Reference

Class	Type	Description
skeleton	Component	A placeholder div with loading animation

Do you have a question? ask the community

Do you see a bug? open an issue on GitHub

LLMs Context: Full Markdown | This Component

Resources: DaisyUI | TailwindCSS | FastHTML Repo