Blazor Placeholder
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>