<header>
  <div class="navbar navbar-dark bg-dark shadow-sm">
    <div class="container">
      <div>
      <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation" onClick="loadEverything()">
        Toggle skeleton styles
      </button>
      </div>
    </div>
  </div>
</header>

<main>

  <section class="example py-5 text-center container loading">
    <div class="row py-lg-5">
      <div class="col-lg-6 col-md-8 mx-auto">
        <h1 class="fw-light loading__item"><span class="content">&nbsp;</span></h1>
        <p class="lead text-muted loading__item"><span class="content"><br /><br /><br/></span></p>
        <p>
          <a href="#" class="btn btn-primary my-2 loading__item">Main call to action</a>
          <a href="#" class="btn btn-secondary my-2 loading__item">Secondary action</a>
        </p>
      </div>
    </div>
  </section>

  <div class="album py-5 bg-light example loading">
    <div class="container">

      <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
        <div class="col">
          <div class="card shadow-sm mb-4">
            <svg class="bd-placeholder-img card-img-top loading__item" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false">
              <title>Placeholder</title>
              <rect width="100%" height="100%" fill="#55595c" /
            </svg>

            <div class="card-body">
              <p class="card-text loading__item"><span class="content"><br/><br/><br/></span></p>
              <div class="d-flex justify-content-between align-items-center">
                <div class="btn-group">
                  <button type="button" class="btn btn-sm btn-outline-secondary loading__item">View</button>
                  <button type="button" class="btn btn-sm btn-outline-secondary loading__item">Edit</button>
                </div>
              </div>
            </div>
          </div>
        </div>
                     <div class="col">
          <div class="card shadow-sm mb-4">
            <svg class="bd-placeholder-img card-img-top loading__item" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false">
              <title>Placeholder</title>
              <rect width="100%" height="100%" fill="#55595c" /
            </svg>

            <div class="card-body">
              <p class="card-text loading__item"><span class="content"><br/><br/><br/></span></p>
              <div class="d-flex justify-content-between align-items-center">
                <div class="btn-group">
                  <button type="button" class="btn btn-sm btn-outline-secondary loading__item">View</button>
                  <button type="button" class="btn btn-sm btn-outline-secondary loading__item">Edit</button>
                </div>
              </div>
            </div>
          </div>
        </div>
                             <div class="col">
          <div class="card shadow-sm mb-4">
            <svg class="bd-placeholder-img card-img-top loading__item" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false">
              <title>Placeholder</title>
              <rect width="100%" height="100%" fill="#55595c" /
            </svg>

            <div class="card-body">
              <p class="card-text loading__item"><span class="content"><br/><br/><br/></span></p>
              <div class="d-flex justify-content-between align-items-center">
                <div class="btn-group">
                  <button type="button" class="btn btn-sm btn-outline-secondary loading__item">View</button>
                  <button type="button" class="btn btn-sm btn-outline-secondary loading__item">Edit</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</main>

<script>
  function loadEverything() {
    var elements = document.querySelectorAll(".example");
    for (var i = 0; i < elements.length; i++) {
      var element = elements[i];
      if (element.classList.contains("loading")) {
        element.classList.remove("loading");
      } else {
        element.classList.add("loading");
      }
    }
  }
</script>
/***********************************
 * Barebones skeleton styles start *
 ***********************************/
:root {
  --color-skeleton-bg: #949494;
}

.loading .loading__item {
  background: var(--color-skeleton-bg);
  color: rgba(0, 0, 0, 0) !important;
  border-color: rgba(0, 0, 0, 0) !important;
  user-select: none;
  pointer-events: none;
}

.loading .loading__item * {
  visibility: hidden;
}

.loading .loading-item:empty::after,
.loading .loading-item *:empty::after {
  content: "\00a0";
}

/*********************************
 * Barebones skeleton styles end *
 *********************************/

.bd-placeholder-img {
  font-size: 1.125rem;
  text-anchor: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

@media (min-width: 768px) {
  .bd-placeholder-img-lg {
    font-size: 3.5rem;
  }
}

body {
  padding-top: 2rem;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.