Blazor Placeholders

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

PlaceholderContainer Parameters

Name	Type	Description	Required	Default
Animation	PlaceholderAnimation	Gets or sets the placeholder animation.		PlaceholderAnimation.Glow
ChildContent	RenderFragment	Specifies the content to be rendered inside this.

Placeholder Parameters

Name	Type	Description	Required	Default
Width	PlaceholderWidth	Gets or sets the placeholder width.		PlaceholderWidth.Col1
Color	PlaceholderColor	Gets or sets the placeholder color.		PlaceholderColor.None
Size	PlaceholderSize	Gets or sets the placeholder size.		PlaceholderSize.None

Examples

Placeholders

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

See demo here.

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%;" />

See demo here.

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" />

See demo here.

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" />

See demo here.

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>

See demo here.