Use loading placeholders for your components or pages to indicate something may still be loading., check out documentation.
Create placeholders with the .placeholder
class and a grid column class (e.g., .col-6
) to set the width
. They can replace the text inside an element or be added as a modifier class to an existing component.
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere
<div class="card" aria-hidden="true">
<img src="dist/img/placeholder_card.jpg" class="card-img-top" alt="...">
<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>
<span class="placeholder col-4"></span>
<span class="placeholder col-4"></span>
<span class="placeholder col-6"></span>
<span class="placeholder col-8"></span>
</p>
<a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-6"></a>
</div>
</div>
By default, the placeholder uses currentColor. This can be overriden with a custom color or utility class.
<div class="placeholder-glow">
<span class="placeholder col-12"></span>
<span class="placeholder col-12 bg-primary"></span>
<span class="placeholder col-12 bg-secondary"></span>
<span class="placeholder col-12 bg-success"></span>
<span class="placeholder col-12 bg-danger"></span>
<span class="placeholder col-12 bg-warning"></span>
<span class="placeholder col-12 bg-info"></span>
<span class="placeholder col-12 bg-light"></span>
<span class="placeholder col-12 bg-dark"></span>
</div>
Class | Values |
---|---|
class="placeholder bg-[value]" |
primary / success / warning / danger / info / red / green / pink / purple / violet / indigo / blue / sky / cyan / teal / neon / lime / sun / yellow / orange / pumpkin / brown / grey / gold / smoke / light / dark |
The size of .placeholders are based on the typographic style of the parent element. Customize them with sizing modifiers: .placeholder-lg, .placeholder-sm, or .placeholder-xs
.
<div class="placeholder-glow">
<span class="placeholder col-12 placeholder-lg"></span>
<span class="placeholder col-12"></span>
<span class="placeholder col-12 placeholder-sm"></span>
<span class="placeholder col-12 placeholder-xs"></span>
</div>
Animate placehodlers with .placeholder-glow
or .placeholder-wave
to better convey the perception of something being actively loaded.
<p class="placeholder-glow">
<span class="placeholder col-12"></span>
</p>
<p class="placeholder-wave">
<span class="placeholder col-12"></span>
</p>