Skip to main content

Blazor Placeholders

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

PlaceholderContainer Parameters

NameTypeDefaultRequiredDescriptionAdded Version
AnimationPlaceholderAnimationPlaceholderAnimation.GlowGets or sets the placeholder animation.1.0.0
ChildContentRenderFragment?null✔️Gets or sets the content to be rendered within the component.1.0.0

Placeholder Parameters

NameTypeDefaultRequiredDescriptionAdded Version
ColorPlaceholderColorPlaceholderColor.NoneGets or sets the placeholder color.1.0.0
SizePlaceholderSizePlaceholderSize.NoneGets or sets the placeholder size.1.0.0
WidthPlaceholderWidthPlaceholderWidth.Col1Gets or sets the placeholder width.1.0.0

Examples

Placeholders

Placeholders - Example
<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.

Placeholders - Width Example
<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.

Placeholders - Color Example
<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.

Placeholders - Sizing Example
<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.

Placeholders - Animation Example
<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.