<div class="container">
  <div class="heading">CSS Skeleton Loader</div>
  <div class="loader">
    <div class="boxes">
      <article>
        <div class="image"></div>
        <div class="text">
          <h3></h3>
          <div class="lines"></div>
          <div class="lines"></div>
        </div>
      </article>
      <article>
        <div class="image"></div>
        <div class="text">
          <h3></h3>
          <div class="lines"></div>
          <div class="lines"></div>
        </div>
      </article>
      <article>
        <div class="image"></div>
        <div class="text">
          <h3></h3>
          <div class="lines"></div>
          <div class="lines"></div>
        </div>
      </article>
    </div>
  </div>
  <div class="content">
    <div class="boxes">
      <article>
        <div class="image">
          <img
               src="https://images.unsplash.com/photo-1574234956923-9281663e479c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1101&q=80"
               />
        </div>
        <div class="text">
          <h3>Heading 1</h3>
          <p>
            Lorem ipsum dolor sit, amet consectetur adipisicing elit.
            Molestias dolores sit odit magnam delectus fuga nisi cum
            praesentium maxime maiores!
          </p>
        </div>
      </article>
      <article>
        <div class="image">
          <img
               src="https://images.unsplash.com/photo-1540569876033-6e5d046a1d77?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80"
               />
        </div>
        <div class="text">
          <h3>Heading 2</h3>
          <p>
            Lorem ipsum dolor sit, amet consectetur adipisicing elit.
            Molestias dolores sit odit magnam delectus fuga nisi cum
            praesentium maxime maiores!
          </p>
        </div>
      </article>
      <article>
        <div class="image">
          <img
               src="https://images.unsplash.com/photo-1562136969-52ad483d6ff5?ixlib=rb-1.2.1&auto=format&fit=crop&w=917&q=80"
               />
        </div>
        <div class="text">
          <h3>Heading 3</h3>
          <p>
            Lorem ipsum dolor sit, amet consectetur adipisicing elit.
            Molestias dolores sit odit magnam delectus fuga nisi cum
            praesentium maxime maiores!
          </p>
        </div>
      </article>
    </div>
  </div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins";
}
.heading {
  text-align: center;
  font-size: 2.5em;
  margin: 2em 0;
}
.boxes {
  display: grid;
  grid-template-rows: repeat(1fr);
  grid-row-gap: 1em;
  margin: 1em;
}
.loader {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 13em;
  left: 0;
  transition: 0.3s all ease;
}
.loader.hide {
  opacity: 0;
  pointer-events: none;
}
.loader article .image {
  height: 150px;
  width: 250px;
}
.loader article h3 {
  height: 1.5em;
  width: 80%;
}
.loader article .lines {
  height: 1em;
  width: 350px;
  margin-top: 1em;
}
.loader article .image,
.loader article h3,
.loader article .lines {
  background-color: #ccc;
  border-radius: 7px;
  background-image: linear-gradient(
    90deg,
    #f4f4f4,
    rgba(229, 229, 229, 0.7) 90px,
    #f4f4f4 150px
  );
  background-size: 600px;
  animation: loading 1s infinite linear;
}
@keyframes loading {
  0% {
    background-position: -100px;
  }
  100% {
    background-position: 300px;
  }
}
.content {
  opacity: 0;
  pointer-events: none;
}
.content.show {
  opacity: 1;
  pointer-events: all;
}
.boxes img {
  height: 150px;
  width: 250px;
  border-radius: 5px;
}
.boxes article {
  display: grid;
  grid-template-columns: 1fr 4fr;
  grid-column-gap: 1em;
}
.boxes article .image {
  justify-self: center;
}
.boxes article .text {
  font-size: 0.85em;
}
const loader = document.querySelector(".loader");
const content = document.querySelector(".content");
window.addEventListener("load", () => {
  loader.classList.add("hide");
  content.classList.add("show");
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.