Skeleton

Display placerholder 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 puls 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 🗙