Home / Frontend Codes and Demos / CSS Code Demos / CSS Grid Card Skeleton Screen
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.

CSS Grid Card Skeleton Screen

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.

About CV

I'm frontend developer

Check Also

Naturalized Checkbox Toggle Switches

This demo is a response to a post by Marcus Connor addressing confusion with checkbox …