Finder Buy now

Placeholders

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

Bootstrap docs

Width

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

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

<!-- Width via style attribute -->
<span class="placeholder" style="width: 33%;"></span>
// Width via col-* class
span.placeholder.col-6

// Width via w-* class
span.placeholder.w-75

// Width via style attribute
span(style="width: 33%;").placeholder

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>
// Default
span.placeholder.col-12

// Primary
span.placeholder.col-12.bg-primary

// Success
span.placeholder.col-12.bg-success

// Danger
span.placeholder.col-12.bg-danger

// Warning
span.placeholder.col-12.bg-warning

// Info
span.placeholder.col-12.bg-info

// Light
span.placeholder.col-12.bg-light

// Dark
span.placeholder.col-12.bg-dark

Sizing

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

<!-- Default -->
<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>
// Large
span.placeholder.col-12.placeholder-lg

// Default
span.placeholder.col-12

// Small
span.placeholder.col-12.placeholder-sm

// Extra small
span.placeholder.col-12.placeholder-xs

Animation

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

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

// Wave animation
span.placeholder.placeholder-wave.col-12

Use case example

<!-- Loading placeholders example -->
<div class="card border-0 shadow" aria-hidden="true">
  <div class="position-relative placeholder-wave">
    <div class="card-img-top placeholder ratio ratio-16x9"></div>
    <i class="fi-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>
    </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 href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-6 placeholder-wave"></a>
  </div>
</div>

// Loading placeholders example
.card.border-0.shadow(aria-hidden="true")
  .position-relative.placeholder-wave
    .card-img-top.placeholder.ratio.ratio-16x9
    i.fi-image.position-absolute.top-50.start-50.translate-middle.fs-1.opacity-40
  .card-body
    h5.card-title.placeholder-glow
      span.placeholder.col-6
    p.card-text.placeholder-glow
      span.placeholder.placeholder-sm.col-7.me-2
      span.placeholder.placeholder-sm.col-4
      span.placeholder.placeholder-sm.col-4.me-2
      span.placeholder.placeholder-sm.col-6
      span.placeholder.placeholder-sm.col-8
    a(href="#", tabindex="-1").btn.btn-primary.disabled.placeholder.col-6.placeholder-wave
Top