Skeleton - Fod.DemoPage

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.