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>