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
<!-- 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"> </a>
</div>
</div>