MudBlazor

Community Support

Discord

GitHub Discussions

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective


Switch to Blazor wasm
Toggle light/dark theme
GitHub repository
Toggle right-to-left/left-to-right

Community Support

Discord

GitHub Discussions

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective

Skeleton

Display placeholder for your content while the data loads.

See Skeleton API for parameter documentation.

Variants

The component can take the shape of 3 different variants.

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudSkeleton />
<MudSkeleton SkeletonType="SkeletonType.Circle" Width="50px" Height="50px" />
<MudSkeleton SkeletonType="SkeletonType.Rectangle" Width="200px" Height="110px" />

Animations

The default animation is pulse, but you can disable it or change to wave.

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudSkeleton />
<MudSkeleton Animation="Animation.False" />
<MudSkeleton Animation="Animation.Wave" />

Pulsate Example

Old Paint

Old paint found on a stone house door.

This photo was taken in a small village in Istra Croatia.

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudCard>
    <MudSkeleton SkeletonType="SkeletonType.Rectangle" Height="200px"/>
    <MudCardContent>
        <MudSkeleton Width="30%" Height="42px;" />
        <MudSkeleton Width="80%" />
        <MudSkeleton Width="100%" />
    </MudCardContent>
    <MudCardActions>
        <MudSkeleton Width="64px" Height="40px" Class="ml-2" />
        <MudSkeleton Width="105px" Height="40px" Class="ml-3" />
    </MudCardActions>
</MudCard>

<MudCard>
    <MudCardMedia Image="_content/MudBlazor.Docs/images/content-template-door.png" Height="200" />
    <MudCardContent>
        <MudText Typo="Typo.h5">Old Paint</MudText>
        <MudText Typo="Typo.body2">Old paint found on a stone house door.</MudText>
        <MudText Typo="Typo.body2">This photo was taken in a small village in Istra Croatia.</MudText>
    </MudCardContent>
    <MudCardActions>
        <MudButton Variant="Variant.Text" Color="Color.Primary">Share</MudButton>
        <MudButton Variant="Variant.Text" Color="Color.Primary">Learn More</MudButton>
    </MudCardActions>
</MudCard>

Wave Example

I

Istra Croatia

Peninsula in Europe

This photo was taken in a small village in Istra Croatia.

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudCard>
    <MudCardHeader>
        <CardHeaderAvatar>
            <MudSkeleton SkeletonType="SkeletonType.Circle" Animation="Animation.Wave" Height="40px" Width="40px"/>
        </CardHeaderAvatar>
        <CardHeaderContent>
            <MudSkeleton Animation="Animation.Wave" Width="40%" />
            <MudSkeleton Animation="Animation.Wave" Width="60%" />
        </CardHeaderContent>
    </MudCardHeader>
    <MudSkeleton SkeletonType="SkeletonType.Rectangle" Animation="Animation.Wave" Height="250px" />
    <MudCardContent>
        <MudSkeleton Animation="Animation.Wave" />
    </MudCardContent>
    <MudCardActions>
        <MudSkeleton SkeletonType="SkeletonType.Circle" Animation="Animation.Wave" Height="30px" Width="30px" Class="ml-2 mb-2" />
        <MudSkeleton SkeletonType="SkeletonType.Circle" Animation="Animation.Wave" Height="30px" Width="30px" Class="ml-3 mb-2" />
    </MudCardActions>
</MudCard>


<MudCard>
    <MudCardHeader>
        <CardHeaderAvatar>
            <MudAvatar>I</MudAvatar>
        </CardHeaderAvatar>
        <CardHeaderContent>
            <MudText Typo="Typo.body1">Istra Croatia</MudText>
            <MudText Typo="Typo.body2">Peninsula in Europe</MudText>
        </CardHeaderContent>
        <CardHeaderActions>
            <MudIconButton Icon="@Icons.Material.Filled.Settings" Color="Color.Default" />
        </CardHeaderActions>
    </MudCardHeader>
    <MudCardMedia Image="_content/MudBlazor.Docs/images/content-template-pilars.png" Height="250" />
    <MudCardContent>
        <MudText Typo="Typo.body2">This photo was taken in a small village in Istra Croatia.</MudText>
    </MudCardContent>
    <MudCardActions>
        <MudIconButton Icon="@Icons.Material.Filled.Favorite" Color="Color.Default" />
        <MudIconButton Icon="@Icons.Material.Filled.Share" Color="Color.Default" />
    </MudCardActions>
</MudCard>
An error has occurred. This application may no longer respond until reloaded. Reload 🗙