Silicon UI Kit

##### Menu

Preview Docs

### Content

Typography Icon font Code Images & figures Tables

### Components

Accordion Alerts Audio player Badges Blog components Breadcrumb Buttons Button group Cards Carousel (Slider) Collapse Dropdowns Forms Gallery (Lightbox) Image comparison slider Input group List group Modal Navbar Offcanvas Pagination Parallax Pills Placeholders Popovers Portfolio components Pricing Progress bars Social buttons Spinners Steps Tabs Team Testimonials / reviews Toasts Tooltips Video popup

### Utilities

Bootstrap Silicon

# 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>
        </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