Bootstrap docs

# Placeholders

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

#### Width

    <!--Width through col-* class -->
    <span class="placeholder col-6"></span>

    <!--Width through w-* class -->
    <span class="placeholder w-75"></span>

    <!--Width through style attribute -->
    <span class="placeholder" style="width: 33%;"></span>

#### Color

    <!-- Default -->
    <span class="placeholder col-12"></span>

    <!-- Primary -->
    <span class="placeholder col-12 bg-primary"></span>

    <!-- Success -->
    <span class="placeholder col-12 bg-success"></span>

    <!-- Danger -->
    <span class="placeholder col-12 bg-danger"></span>

    <!-- Warning -->
    <span class="placeholder col-12 bg-warning"></span>

    <!-- Info -->
    <span class="placeholder col-12 bg-info"></span>

    <!-- Light -->
    <span class="placeholder col-12 bg-light"></span>

    <!-- Dark -->
    <span class="placeholder col-12 bg-dark"></span>

#### Sizing

    <!-- Large -->
    <span class="placeholder col-12 placeholder-lg"></span>

    <!-- Normal -->
    <span class="placeholder col-12"></span>

    <!-- Small -->
    <span class="placeholder col-12 placeholder-sm"></span>

    <!-- Extra small -->
    <span class="placeholder col-12 placeholder-xs"></span>

#### Animation

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

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

#### Loading card example

##### Card title

    <!-- Loading card example -->
    <div class="card" aria-hidden="true" style="max-width: 300px;">
      <div class="position-relative placeholder-wave">
        <div class="card-img-top placeholder ratio ratio-16x9"></div>
        <i class="ci-image position-absolute top-50 start-50 translate-middle fs-1 opacity-40"></i>
      </div>
      <div class="card-body">
        <h5 class="card-title placeholder-glow">
          <span class="placeholder col-6"></span>
          <span class="visually-hidden">Card title</span>
        </h5>
        <p class="card-text placeholder-glow">
          <span class="placeholder placeholder-sm col-7 me-2"></span>
          <span class="placeholder placeholder-sm col-4"></span>
          <span class="placeholder placeholder-sm col-4 me-2"></span>
          <span class="placeholder placeholder-sm col-6"></span>
          <span class="placeholder placeholder-sm col-8"></span>
        </p>
        <a class="btn btn-primary disabled placeholder col-6 placeholder-wave" tabindex="-1">&nbsp;</a>
      </div>
    </div>

Top