In this tutorial we will create skeleton screen loading effect using CSS. The skeleton screens are used to indicate that the content is loading. They are also called splash screens. This is a part of the modern design trend. The skeleton screens are better than the loading spinners in some cases. It is used by many big companies like Facebook, Google, etc.
HTML Code: In this section, we will create a basic structure of loading page screen skeletons. To create a loading page skeleton, we have to use the <div> element where we will display the content. We will add a loading class to each element inside the card which we will remove when the content is loaded.
YouTube Loading animation step 1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Skeleton screen effect</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta https-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap" rel="stylesheet">
</head>
<body>
<div class="row">
<div class="container">
<div class="grid-row grid-4-4">
<div class="cards">
<div class="card_image loading"></div>
<div class="card_title loading"></div>
<div class="card_description loading"></div>
</div>
<div class="cards">
<div class="card_image loading"></div>
<div class="card_title loading"></div>
<div class="card_description loading"></div>
</div>
<div class="cards">
<div class="card_image loading"></div>
<div class="card_title loading"></div>
<div class="card_description loading"></div>
</div>
<div class="cards">
<div class="card_image loading"></div>
<div class="card_title loading"></div>
<div class="card_description loading"></div>
</div>
<div class="cards">
<div class="card_image loading"></div>
<div class="card_title loading"></div>
<div class="card_description loading"></div>
</div>
<div class="cards">
<div class="card_image loading"></div>
<div class="card_title loading"></div>
<div class="card_description loading"></div>
</div>
<div class="cards">
<div class="card_image loading"></div>
<div class="card_title loading"></div>
<div class="card_description loading"></div>
</div>
<div class="cards">
<div class="card_image loading"></div>
<div class="card_title loading"></div>
<div class="card_description loading"></div>
</div>
</div>
</div>
</div>
</body>
</html>
YouTube Loading animation step 2:
CSS Code: In this section, we will use some CSS property to create a loading page screen skeleton.
* {
padding: 0;
margin: 0;
font-family: 'IBM Plex Sans', sans-serif;
}
.row {
display: block;
position: relative;
margin: 50px 0;
}
.container {
width: 95%;
max-width: 1240px;
margin: auto;
}
.grid-row.grid-4-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 20px;
}
.cards {
background: #fff;
height: auto;
width: auto;
overflow: hidden;
box-shadow: 5px 8px 15px -10px rgba(0,0,0,0.25);
}
.card_image {
width: 100%;
height: 100%;
}
.card_image.loading {
width: 100%;
height: 180px;
}
.card_title {
padding: 8px;
font-size: 22px;
font-weight: 700;
}
.card_title.loading {
width: 50%;
height: 1rem;
margin: 1rem;
border-radius: 3px;
position: relative;
}
.card_description {
padding: 8px;
font-size: 16px;
}
.card_description.loading {
height: 3rem;
margin: 1rem;
border-radius: 3px;
}
.loading {
position: relative;
background: #cccccc;
}
.loading:after {
content: "";
display: block;
position: absolute;
top: 0;
width: 100%;
height: 100%;
transform: translateX(-100px);
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
animation: loading 0.8s infinite;
}
@keyframes loading {
100% {
transform: translateX(100%);
}
}