Hello everyone, today we are going to take a look at a rather special method of loading content, in fact we are going to talk about skeleton loading, a method of loading pages that is quite widespread and quite original to make users wait while your page is loading. You are ready, so let's go !
What is it ?
But what does a page using skeleton loading look like? In fact, you see them on every platform: Twitter, YouTube, Netflix... Below you can see glimpses of skeleton loading on various websites mentioned above.
As you can see, skeleton loading is used by high profile sites for a reason: it allows the user to directly understand where and how the information will be organised after loading.
Let's code
Now we're going to start making a page that uses skeleton loading to present videos. Please note that if you want to use skeletons loading on your website, you will need to use an AJAX add-on to fully load the videos. In our case, we will implement the skeleton loading system, without loading real videos.
First we will write our HTML structure :
<!-- This div is used as a container -->
<div class="wrapper shine">
<!-- Title -->
<h2>Coming soon</h2>
<!-- Container of card (videos that load) -->
<div class="container">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
<h2>Best sellers</h2>
<div class="container">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
<h2>Recommended</h2>
<div class="container">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</div>
Then we add some style :
/* Fonts */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap");
/* Style */
body {
background: #dedede;
}
.wrapper {
width: 900px;
max-width: 95%;
margin: 55px auto;
}
.wrapper h2 {
color: white;
letter-spacing: 1px;
margin: 10px 0 5px 10px;
font-family: "Roboto", sans-serif;
}
.wrapper .container {
display: flex;
flex-wrap: wrap;
align-content: center;
justify-content: flex-start;
align-items: center;
flex-direction: row;
}
.wrapper .container .card {
margin: 10px;
width: 160px;
height: 90px;
border-radius: 3px;
background-image: linear-gradient(90deg, #e2e2e2 0px, #efefef 30px, #e2e2e2 60px);
background-size: calc(160px + 160px);
animation: refresh 1.2s infinite ease-out;
}
/* Animation */
@keyframes refresh {
0% {
background-position: calc(-160px);
}
60%, 100% {
background-position: 160px;
}
}
You can see the final result below :
If you want to load the video thumbnails, you will have to use AJAX. To do this, it is highly recommended to use jQuery which simplifies the requests and makes them more reliable. An example code in AJAX :
<script>
$(document).ready(function() {
$(".card").load("https://www.site.com/videoCharging.php");
});
</script>
I hope you enjoyed this tutorial, if you have any questions, feel free to ask me in the comments. 👍
Top comments (1)
Wow