Blazor Placeholders

Use Blazor Bootstrap loading placeholders for your components or pages to indicate something may still be loading.

About#

Placeholders can be used to enhance the experience of your application.

Examples#

<PlaceholderContainer Animation="PlaceholderAnimation.Glow">
    <Placeholder Width="PlaceholderWidth.Col7" />
    <Placeholder Width="PlaceholderWidth.Col9" />
    <Placeholder Width="PlaceholderWidth.Col6" />
    <Placeholder Width="PlaceholderWidth.Col7" />
</PlaceholderContainer>

Width#

You can change the width through PlaceholderWidth, width utilities, or inline styles.

<Placeholder Width="PlaceholderWidth.Col6" />
<Placeholder Class="w-75" />
<Placeholder Style="width: 25%;" />

Color#

By default, the placeholder uses currentColor. This can be overridden with the Color property of type enum.

<Placeholder Width="PlaceholderWidth.Col12" />
<Placeholder Width="PlaceholderWidth.Col12" Color="PlaceholderColor.Primary" />
<Placeholder Width="PlaceholderWidth.Col12" Color="PlaceholderColor.Secondary" />
<Placeholder Width="PlaceholderWidth.Col12" Color="PlaceholderColor.Success" />
<Placeholder Width="PlaceholderWidth.Col12" Color="PlaceholderColor.Danger" />
<Placeholder Width="PlaceholderWidth.Col12" Color="PlaceholderColor.Warning" />
<Placeholder Width="PlaceholderWidth.Col12" Color="PlaceholderColor.Info" />
<Placeholder Width="PlaceholderWidth.Col12" Color="PlaceholderColor.Light" />
<Placeholder Width="PlaceholderWidth.Col12" Color="PlaceholderColor.Dark" />

Sizing#

The size of placeholders are based on the typographic style of the parent element. Customize them with Size property of type enum.

<Placeholder Width="PlaceholderWidth.Col12" />
<Placeholder Width="PlaceholderWidth.Col12" Size="PlaceholderSize.Large" />
<Placeholder Width="PlaceholderWidth.Col12" Size="PlaceholderSize.Small" />
<Placeholder Width="PlaceholderWidth.Col12" Size="PlaceholderSize.ExtraSmall" />

Animation#

Animate placeholders with PlaceholderAnimation.Glow or PlaceholderAnimation.Wave to better convey the perception of something being actively loaded.

<PlaceholderContainer Animation="PlaceholderAnimation.Glow">
    <Placeholder Width="PlaceholderWidth.Col12" />
    <Placeholder Width="PlaceholderWidth.Col12" Size="PlaceholderSize.Large" />
    <Placeholder Width="PlaceholderWidth.Col12" Size="PlaceholderSize.Small" />
    <Placeholder Width="PlaceholderWidth.Col12" Size="PlaceholderSize.ExtraSmall" />
</PlaceholderContainer>

<br />
<br />

<PlaceholderContainer Animation="PlaceholderAnimation.Wave">
    <Placeholder Width="PlaceholderWidth.Col12" />
    <Placeholder Width="PlaceholderWidth.Col12" Size="PlaceholderSize.Large" />
    <Placeholder Width="PlaceholderWidth.Col12" Size="PlaceholderSize.Small" />
    <Placeholder Width="PlaceholderWidth.Col12" Size="PlaceholderSize.ExtraSmall" />
</PlaceholderContainer>