Skeleton

Visual placeholders that provide feedback during content loading, reducing perceived wait time and improving user experience. Supports multiple shape variants and animation modes.

Shape Variants

FodSkeleton provides four shape variants for different placeholder needs: Rectangle for blocks, Circle for avatars, Text for paragraphs, and List for repeated items.

Rectangle

Circle

Text (3 lines)

List (3 items)

razor
<FodSkeleton Variant="SkeletonVariant.Rectangle" Width="200px" Height="100px"/>
<FodSkeleton Variant="SkeletonVariant.Circle" Size="64px"/>
<FodSkeleton Variant="SkeletonVariant.Text" Lines="3" Width="200px"/>
<FodSkeleton Variant="SkeletonVariant.List" Width="200px"/>

Animation Modes

Skeletons support three animation modes: Pulse (subtle opacity fade), Wave (shimmer effect), and None (static).

Pulse (Default)

Wave

None (Static)

razor
<FodSkeleton Animation="SkeletonAnimation.Pulse" Width="150px" Height="60px"/>
<FodSkeleton Animation="SkeletonAnimation.Wave" Width="150px" Height="60px"/>
<FodSkeleton Animation="SkeletonAnimation.None" Width="150px" Height="60px"/>

Circle Sizes

Circle skeletons use the Size parameter to set both width and height, perfect for avatars and icons.

Small (32px)

Medium (48px)

Large (64px)

Extra Large (96px)

razor
<FodSkeleton Variant="SkeletonVariant.Circle" Size="32px"/>
<FodSkeleton Variant="SkeletonVariant.Circle" Size="48px"/>
<FodSkeleton Variant="SkeletonVariant.Circle" Size="64px"/>
<FodSkeleton Variant="SkeletonVariant.Circle" Size="96px"/>

Text Lines

Text skeletons support multiple lines with customizable spacing between them.

Single Line

3 Lines

5 Lines with Spacing

razor
<FodSkeleton Variant="SkeletonVariant.Text" Lines="1" Width="200px"/>
<FodSkeleton Variant="SkeletonVariant.Text" Lines="3" Width="200px"/>
<FodSkeleton Variant="SkeletonVariant.Text" Lines="5" Width="200px" Spacing="12px"/>

List Items

List variant renders multiple item placeholders. Default is 3 items when Lines is not specified.

Default (3 items)

5 Items

Single Item

razor
<FodSkeleton Variant="SkeletonVariant.List" Width="200px"/>
<FodSkeleton Variant="SkeletonVariant.List" Lines="5" Width="200px"/>
<FodSkeleton Variant="SkeletonVariant.List" Lines="1" Width="200px"/>

Dimension Control

Rectangle skeletons support explicit Width and Height for precise sizing.

Fixed Size

Full Width

Square

razor
<FodSkeleton Variant="SkeletonVariant.Rectangle" Width="150px" Height="80px"/>
<FodSkeleton Variant="SkeletonVariant.Rectangle" Width="100%" Height="40px"/>
<FodSkeleton Variant="SkeletonVariant.Rectangle" Width="100px" Height="100px"/>

Card Skeleton Pattern

Compose multiple skeleton variants to create realistic card loading placeholders.

razor
<div class="card-skeleton">
    <FodSkeleton Variant="SkeletonVariant.Rectangle" Width="100%" Height="180px"/>
    <div class="card-content">
        <FodSkeleton Variant="SkeletonVariant.Text" Lines="1" Width="60%" Height="24px"/>
        <FodSkeleton Variant="SkeletonVariant.Text" Lines="3" Width="100%"/>
        <div class="card-actions">
            <FodSkeleton Variant="SkeletonVariant.Rectangle" Width="80px" Height="36px"/>
            <FodSkeleton Variant="SkeletonVariant.Rectangle" Width="80px" Height="36px"/>
        </div>
    </div>
</div>

Profile Skeleton Pattern

Common pattern combining circle avatar with text lines for user profiles.

razor
<div class="profile-skeleton">
    <FodSkeleton Variant="SkeletonVariant.Circle" Size="64px"/>
    <div class="profile-info">
        <FodSkeleton Variant="SkeletonVariant.Text" Lines="1" Width="120px" Height="20px"/>
        <FodSkeleton Variant="SkeletonVariant.Text" Lines="1" Width="180px" Height="16px"/>
    </div>
</div>

Interactive Loading Example

Click the button to simulate data loading with skeleton placeholder.

JD
John Doe

Software Engineer at Acme Corp. Building great products with Blazor.

razor
@if (_isLoading)
{
     <FodSkeleton Variant="SkeletonVariant.Circle" Size="64px" Animation="SkeletonAnimation.Wave"/>
     <FodSkeleton Variant="SkeletonVariant.Text" Lines="2" Animation="SkeletonAnimation.Wave"/>
}
else
{
     <div class="profile">@_userData</div>
}

Accessibility

FodSkeleton respects prefers-reduced-motion user preference. Animations automatically disable for users who prefer reduced motion.

Reduced Motion Support: When a user enables "Reduce Motion" in their operating system settings, all skeleton animations automatically disable via CSS media query.

Test this feature:

  • Windows: Settings → Accessibility → Visual effects → Animation effects (Off)
  • macOS: System Settings → Accessibility → Display → Reduce motion
css
@media (prefers-reduced-motion: reduce) {
    .fod-skeleton--pulse,
    .fod-skeleton--wave {
        animation: none;
    }
}

API Reference

FodSkeleton component properties and their descriptions.

No properties defined.

Rejoining the server...

Rejoin failed... trying again in seconds.

Failed to rejoin.
Please retry or reload the page.

The session has been paused by the server.

Failed to resume the session.
Please reload the page.