CSS Grid Card Skeleton Screen with Custom Properties

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.

Demo Download

Author Rafael Goulart
Hits
Official Page: Go to website
Created SEPTEMBER 06, 2018
License Open
Compatible browsers Chrome, Firefox, Opera, Safari

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

/**
* card
*/
#card {
  padding: 8px;
  background-color: white;
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
  -moz-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
  -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
  transition: box-shadow 0.6s ease;
}
@media (min-width: 960px) {
  #card {
    padding: 16px;
  }
}
#card:hover {
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  -moz-box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  -webkit-box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}
.divider {
  border-bottom: 1px solid #151515;
  margin-bottom: 10px;
}
:root,
html,
body {
  background-color: #222;
}
.skeleton {
  --card: linear-gradient(to bottom, #313131 100%, transparent 0%);
  --card-height: 340px;
  --avatar: radial-gradient(circle 40px at center, #2a2a2a 100%, transparent 0%);
  --avatar-size: 80px;
  --avatar-position: 24px 24px;
  --title: linear-gradient(to right, #2a2a2a 100%, transparent 0%);
  --title-height: 28px;
  --title-width: 160px;
  --title-position: 24px 120px;
  --subtitle: linear-gradient(to right, #262626 100%, transparent 0%);
  --subtitle-height: 16px;
  --subtitle-width: 200px;
  --subtitle-position: 24px 160px;
  --button: linear-gradient(to bottom, #2a2a2a 100%, transparent 0%);
  --button-height: 40px;
  --button-1-width: 90px;
  --button-1-position: 24px 260px;
  --button-2-width: 90px;
  --button-2-position: 124px 260px;
  --blur-width: 200px;
  --blur-size: var(--blur-width) var(--card-height);
}
#header__title {
  font-family: 'Ubuntu Condensed', sans-serif;
  color: #BDBDBD;
}
#header__description {
  color: #AAA;
  font-weight: 300;
}
.page__container {
  padding: 8px;
}
@media (min-width: 960px) {
  .page__container {
    padding: 16px;
  }
}
/*
 * grid container
 */
#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.

Advertisement

Google Matched Content...