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 http-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%);
}
}
YouTube Loading animation video output:
YouTube Loading animation codepn output:
For more interesting content
Top comments (4)
Wow! This was cool!
Just a suggestion, when you create a codeblock using 3 backticks, also specify the language name on the first one to highlight the code too
Thanks for your suggestion :)
This is awesome! Thanks a lot for sharing this.
Your Most Welcome :)