Silicon Silicon UI Kit
 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>

<!-- Accent -->
<span class="placeholder col-12 bg-accent"></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>

<!-- Default -->
<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: Card

<!-- Loading card example -->
<div class="card border-0 shadow" aria-hidden="true">
  <div class="position-relative placeholder-wave">
    <div class="card-img-top placeholder ratio ratio-16x9"></div>
    <i class="bx bx-image position-absolute top-50 start-50 translate-middle display-3 fw-normal opacity-35"></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 href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-6 placeholder-wave"> </a>
  </div>
</div>
Top