Skip to main content

Placeholders

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

About

Placeholders can enhance the experience of your application. They're built only with HTML and CSS, meaning you don't need any JavaScript to create them. You will, however, need some custom JS to swap their visibility and display actual content.

Example

<div class="card">
  <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>
    </p>
  </div>
</div>

Width

Use col-* column classes or boodoo sizing utility classes (like .w-25, .w-50, .w-75, .w-100) to set widths without using inline styles.

Animation

Give placeholders a wave or glow effect with .placeholder-wave and .placeholder-glow.

<div class="placeholder placeholder-lg col-6 placeholder-glow"></div>
<div class="placeholder placeholder-lg col-6 placeholder-wave"></div>

Sizes

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

Skeleton

For a full shimmer skeleton, use .skeleton with size/shape helpers .skeleton-circle, .skeleton-text.

<span class="skeleton skeleton-circle demo-skeleton-avatar"></span>
<div class="w-75">
  <div class="skeleton skeleton-text mb-2 demo-skeleton-line-1"></div>
  <div class="skeleton skeleton-text mb-2 demo-skeleton-line-2"></div>
  <div class="skeleton skeleton-text demo-skeleton-line-3"></div>
</div>