Placeholders | DashLite Admin Template

Components

## Placeholders

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

#### Examples

In the example below, we take a typical card component and recreate it with placeholders applied to create a “loading card”. Size and proportions are the same between the two.

##### Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

#####

###### Code Example

    <div class="card card-bordered">
        <img src="./images/slides/slide-a.jpg" class="card-img-top" alt="">
        <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
    </div>
    <div class="card card-bordered placeholder-glow" aria-hidden="true">
        <img src="./images/slides/slide-a.jpg" class="card-img-top placeholder" alt="">
        <div class="card-body">
            <h5 class="card-title placeholder-glow">
                <span class="placeholder col-6"></span>
            </h5>
            <p class="card-text placeholder-glow">
                <span class="placeholder col-7"></span>
                <span class="placeholder col-4"></span>
                <span class="placeholder col-4"></span>
                <span class="placeholder col-6"></span>
                <span class="placeholder col-8"></span>
            </p>
            <a class="btn btn-primary disabled placeholder col-6" aria-disabled="true"></a>
        </div>
    </div>

#### How it works

Create placeholders with the `.placeholder` class and a grid column class (e.g., `.col-6` ) to set the `width`. They can replace the text inside an element or be added as a modifier class to an existing component.

We apply additional styling to `.btns` via `::before` to ensure the `height` is respected. You may extend this pattern for other situations as needed, or add a `` within the element to reflect the height when actual text is rendered in its place.

###### Code Example

    <p aria-hidden="true">
        <span class="placeholder col-6"></span>
    </p>

    <a class="btn btn-primary disabled placeholder col-4" aria-disabled="true"></a>

#### Width

You can change the `width` through grid column classes, width utilities, or inline styles.

###### Code Example

    <span class="placeholder col-6"></span>
    <span class="placeholder w-75"></span>
    <span class="placeholder" style="width: 25%;"></span>

#### Color

By default, the `placeholder` uses `currentColor`. This can be overridden with a custom color or utility class.

###### Code Example

    <span class="placeholder col-12"></span>
    <span class="placeholder col-12 bg-primary"></span>
    <span class="placeholder col-12 bg-secondary"></span>
    <span class="placeholder col-12 bg-success"></span>
    <span class="placeholder col-12 bg-danger"></span>
    <span class="placeholder col-12 bg-warning"></span>
    <span class="placeholder col-12 bg-info"></span>
    <span class="placeholder col-12 bg-light"></span>
    <span class="placeholder col-12 bg-dark"></span>

#### Sizing

The size of `.placeholders` are based on the typographic style of the parent element. Customize them with sizing modifiers: `placeholder-lg`, `.placeholder-sm`, or `.placeholder-xs`.

###### Code Example

    <span class="placeholder col-12 placeholder-lg"></span>
    <span class="placeholder col-12"></span>
    <span class="placeholder col-12 placeholder-sm"></span>
    <span class="placeholder col-12 placeholder-xs"></span>

#### Animation

Animate placeholders with `.placeholder-glow` or `.placeholder-wave` to better convey the perception of something being actively loaded.

###### Code Example

    <p class="placeholder-glow">
      <span class="placeholder col-12"></span>
    </p>

    <p class="placeholder-wave">
      <span class="placeholder col-12"></span>
    </p>

##### Select Your Country

- Argentina
- Australia
- Bangladesh
- Canada (English)
- Centrafricaine
- China
- France
- Germany
- Iran
- Italy
- México
- Philippines
- Portugal
- South Africa
- Spain
- Switzerland
- United Kingdom
- United State