Loading...
Customize

Customize theme

Colors
Primary
Warning
Info
Success
Danger
Typography (1rem = 16px)
Borders / Rounding
Around UI Kit
Buy now

Menu

Content

Components

Utilities

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>

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 -->
<span class="placeholder placeholder-wave col-12"></span>

Use case example

<!-- Loading placeholders example -->
<div class="card" aria-hidden="true">
  <div class="position-relative placeholder-wave">
    <div class="card-img-top placeholder ratio ratio-16x9"></div>
    <i class="ai-image position-absolute top-50 start-50 translate-middle fs-1 opacity-50"></i>
  </div>
  <div class="card-body">
    <h5 class="card-title placeholder-glow">
      <span class="placeholder col-6"></span>
      <span class="visually-hidden">Heading</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>