Placeholders

Use placeholders to show loading structure before real content is available.

About

Placeholders show the approximate shape of content while data is loading. They should be temporary, hidden from assistive technology when replacing real content, and sized to match the loaded layout as closely as practical.

How it works

Set placeholder="true" on supported elements to apply Bootstrap placeholder styling. Wrap related placeholders in placeholder-animation when the glow or wave animation should apply to a group.

Placeholders are built with HTML and CSS only. Toggle them from application code when loading completes, and keep the placeholder layout close to the final content to avoid large visual jumps.

Example

Combine placeholders with a card or other component shell to preview the shape of content while data loads.

aspnet 

<bs-card aria-hidden="true" bs-width="Relative50">
    <bs-card-image-top src="/images/XmlLogGen.png" alt="" />
    <bs-card-body>
        <bs-heading heading-level="Three" heading-style-level="Five" card-content="Title">
            <bs-span screen-reader-visibility="VisuallyHidden">Loading card title</bs-span>
            <bs-div placeholder="true" span="Six"></bs-div>
        </bs-heading>
        <bs-div placeholder-animation="Glow">
            <bs-div placeholder="true" span="Seven"></bs-div>
            <bs-div placeholder="true" span="Four"></bs-div>
            <bs-div placeholder="true" span="Four"></bs-div>
            <bs-div placeholder="true" span="Six"></bs-div>
            <bs-div placeholder="true" span="Eight"></bs-div>
        </bs-div>
        <bs-button btn-style="Primary" placeholder="true" span="Six" disabled="true" aria-disabled="true"></bs-button>
    </bs-card-body>
</bs-card>

Width

Use span or typed width helpers to control placeholder width.

aspnet 

<bs-div placeholder="true" span="Six"></bs-div>
<bs-div placeholder="true" bs-width="Relative75"></bs-div>
<bs-div placeholder="true" bs-width="Relative50"></bs-div>
<bs-div placeholder="true" bs-width="Relative25"></bs-div>

Color

Use background color helpers to communicate the same semantic color variants available from Bootstrap placeholders.

aspnet 

<bs-div placeholder="true" bg-color="Primary" span="Twelve"></bs-div>
<bs-div placeholder="true" bg-color="Secondary" span="Twelve"></bs-div>
<bs-div placeholder="true" bg-color="Success" span="Twelve"></bs-div>
<bs-div placeholder="true" bg-color="Danger" span="Twelve"></bs-div>
<bs-div placeholder="true" bg-color="Warning" span="Twelve"></bs-div>
<bs-div placeholder="true" bg-color="Info" span="Twelve"></bs-div>
<bs-div placeholder="true" bg-color="Light" span="Twelve"></bs-div>
<bs-div placeholder="true" bg-color="Dark" span="Twelve"></bs-div>

Sizing

Use placeholder-size for the large, small, and extra-small placeholder variants.

aspnet 

<bs-div placeholder="true" span="Twelve" placeholder-size="Large"></bs-div>
<bs-div placeholder="true" span="Twelve"></bs-div>
<bs-div placeholder="true" span="Twelve" placeholder-size="Small"></bs-div>
<bs-div placeholder="true" span="Twelve" placeholder-size="ExtraSmall"></bs-div>

Animation

Use glow or wave animation to indicate loading activity. Avoid long-running animation when it does not add useful status information.

aspnet 

<bs-div placeholder-animation="Glow" bottom-margin="Default3">
    <bs-div placeholder="true" span="Twelve"></bs-div>
</bs-div>
<bs-div placeholder-animation="Wave">
    <bs-div placeholder="true" span="Twelve"></bs-div>
</bs-div>

CSS

Placeholder dimensions, colors, and animation effects come from Bootstrap CSS. BCL helpers emit the placeholder state and animation classes, then normal Bootstrap utilities shape the skeleton layout.

Sass variables

Projects that compile Bootstrap Sass can adjust placeholder opacity and animation defaults before publishing the CSS bundle consumed by the docs app.