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.

Sizes

Skeleton

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