# Placeholders

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

## Example

### Card title

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

Go somewhere

###

    <!--example-->
    <div class="d-flex">
      <div class="card w-lg-25 w-100 me-3">
        <img src="../../assets/images/blog/blog-img-1.jpg" class="card-img-top" alt="img">
      <div class="card-body">
          <h3 class="card-title">Card title</h3>
          <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 w-lg-25 w-100">
      <img src="../../assets/images/blog/blog-img-1.jpg" class="card-img-top" alt="img">
        <div class="card-body">
          <h3 class="card-title placeholder-glow">
            <span class="placeholder col-6"></span>
          </h3>
          <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 href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-6"></a>
        </div>
      </div>
    </div>

## Width

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

## Color

    <!-- color -->
    <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

     <!-- sizing -->
    <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

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