CSS Grid Card Skeleton Screen

The skeleton page is a big trend in UX field. Using CSS Grid to create the page layout, it is more practical to work with components that need to be dynamically repeat. Example of a skeleton screen for a card loader using CSS Grid and Custom Properties. Example developed using css and html. Demo and download option available.

HTML Code

<div class="page__container">
  <div class="header">
    <h1 id="header__title">CSS Grid Card Skeleton Screen</h1>
    <h2 id="header__description">Example of a skeleton screen for a card loader using CSS Grid and Custom Properties.</h2>
    <div class="divider"></div>
  </div>
  <div id="grid" class="skeleton">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
  </div>
</div>

CSS Code

#grid {
  height: 100%;
  display: grid;
  grid-gap: 10px 10px;
  grid-auto-rows: auto;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.skeleton .card:empty::after {
  content: "";
  display: block;
  width: 100%;
  height: 340px;
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease;
  background-image: linear-gradient(90deg, rgba(51, 51, 51, 0) 0, rgba(51, 51, 51, 0.8) 50%, rgba(51, 51, 51, 0) 100%), var(--avatar), var(--title), var(--subtitle), var(--button), var(--button), var(--card);
  background-size: var(--blur-size), var(--avatar-size) var(--avatar-size), var(--title-width) var(--title-height), var(--subtitle-width) var(--subtitle-height), var(--button-1-width) var(--button-height), var(--button-2-width) var(--button-height), 100% 100%;
  background-position: -150% 0, var(--avatar-position), var(--title-position), var(--subtitle-position), var(--button-1-position), var(--button-2-position), 0 0;
  background-repeat: no-repeat;
  animation: loading 1.9s infinite linear;
}
@keyframes loading {
  to {
    background-position: 350% 0, var(--avatar-position), var(--title-position), var(--subtitle-position), var(--button-1-position), var(--button-2-position), 0 0;
  }
}

Preview

See the Pen CSS Grid Card Skeleton Screen (w/ Custom Properties) by Rafael Goulart (@faelplg) on CodePen.