Flowbite Blazor

Skeleton Examples

The Skeleton component provides placeholder content during loading states, improving perceived performance and user experience. Animation respects the user's prefers-reduced-motion accessibility setting.

Default Skeleton #

A simple text placeholder skeleton.

<Skeleton />

Skeleton Variants #

Different preset shapes for common use cases.


<div class="flex flex-wrap items-center gap-4">
    <Skeleton Variant="SkeletonVariant.Text" Width="w-48" />
    <Skeleton Variant="SkeletonVariant.Avatar" />
    <Skeleton Variant="SkeletonVariant.Thumbnail" />
    <Skeleton Variant="SkeletonVariant.Button" />
    <Skeleton Variant="SkeletonVariant.Input" Width="w-48" />
</div>

Input Field Skeleton #

Placeholder for form input fields.

Name


<div class="space-y-4 max-w-md">
    <div>
        <label class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">Name</label>
        <Skeleton Variant="SkeletonVariant.Input" />
    </div>
    <div>
        <label class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
        <Skeleton Variant="SkeletonVariant.Input" />
    </div>
</div>

Multi-Line Text #

Use the Lines parameter to render multiple text lines.

3 lines

5 lines


<Skeleton Variant="SkeletonVariant.Text" Lines="3" />
<Skeleton Variant="SkeletonVariant.Text" Lines="5" />

Card Skeleton #

Full-width card placeholder for content loading.

<Skeleton Variant="SkeletonVariant.Card" />

Custom Dimensions #

Override dimensions with Tailwind utility classes.


<Skeleton Variant="SkeletonVariant.Custom" Width="w-full" Height="h-20" Class="rounded-xl" />

Without Animation #

Disable the pulse animation for static placeholders.

<Skeleton Animated="false" Width="w-32" />

Accessibility: Motion Reduce #

Animation automatically disabled when user has prefers-reduced-motion enabled. The skeleton uses motion-reduce:animate-none to respect this OS setting.

Enable "Reduce motion" in your OS accessibility settings to see animation disabled.


@* Animation respects prefers-reduced-motion *@
<Skeleton Animated="true" Width="w-48" />

@* CSS: animate-pulse motion-reduce:animate-none *@

User Card Loading State #

Compose multiple skeletons for complex layouts.


<div class="flex items-center gap-4 p-4 border rounded-lg dark:border-gray-700">
    <Skeleton Variant="SkeletonVariant.Avatar" Width="w-14" Height="h-14" />
    <div class="flex flex-col gap-2">
        <Skeleton Variant="SkeletonVariant.Text" Width="w-32" />
        <Skeleton Variant="SkeletonVariant.Text" Width="w-48" Height="h-3" />
    </div>
</div>

Blog Post Loading State #

Skeleton for a blog post with header, image, and body text.


<div class="p-4 border rounded-lg dark:border-gray-700 space-y-4">
    <Skeleton Variant="SkeletonVariant.Text" Width="w-3/4" Height="h-6" />
    <div class="flex items-center gap-2">
        <Skeleton Variant="SkeletonVariant.Avatar" Width="w-8" Height="h-8" />
        <Skeleton Variant="SkeletonVariant.Text" Width="w-24" Height="h-3" />
    </div>
    <Skeleton Variant="SkeletonVariant.Card" Height="h-40" />
    <Skeleton Variant="SkeletonVariant.Text" Lines="4" />
</div>