Hello everyone! In this tutorial, let's build a simple skeleton loader component using HTML and CSS. You can then use this component in your websites/apps as a fallback option before your main content loads.
Step 1. - HTML
We will create a card and its skeleton loader, so let's start with adding the HTML for both the card and the skeleton.
HTML for the card
<div class="card">
<div>
<img class="card-img" src='https://avataaars.io/?avatarStyle=Transparent&topType=ShortHairShortWaved&accessoriesType=Prescription01&hairColor=Black&facialHairType=Blank&clotheType=Hoodie&clotheColor=Blue03&eyeType=Default&eyebrowType=Default&mouthType=Twinkle&skinColor=Light'/>
</div>
<div class="card-text">
<h2 class="card-title">Gaurav Gawade</h2>
<p class="card-description">
<span>Lorem ipsum dolor sit amet consectetur, adipisicing eli.</span>
</p>
<ul class="card-skills">
<li class="skill">UI Designer.</li>
<li class="skill">UX Designer.</li>
<li class="skill">Web Developer.</li>
</ul>
<a href="#" class="card-link">Read More</a>
</div>
</div>
HTML for the skeleton
(We are going to keep the basic structure the same as the card but we will remove the content. Also, change the classes on the elements')
<div class="skeleton">
<div class="skeleton-img"></div>
<div class="skeleton-text">
<h2 class="skeleton-title"></h2>
<p class="skeleton-description">
<span></span>
<span></span>
</p>
<ul class="skeleton-skills">
<li class="skill"></li>
<li class="skill"></li>
<li class="skill"></li>
</ul>
<a href="#" class="skeleton-link"></a>
</div>
</div>
Step 2 - Adding the common styles for the card and the skeleton.
(For the consistent look)
.card,
.skeleton {
display: flex;
justify-content: space-around;
padding: 20px;
max-width: 400px;
height: 155px;
margin: 20px;
border-radius: 10px;
background-color: #E2E8F0;
box-shadow:
0 9px 33px rgba(0, 0, 0, 0.07);
}
.card-text, .skeleton-text{
display: flex;
flex-direction: column;
justify-content: space-between;
width: 250px;
margin-left: 10px;
}
.card-img, .skeleton-img{
width: 75px;
height: 75px;
border-radius: 50%;
}
.card-description, .skeleton-description{
margin: 10px 0;
}
.card-link, .skeleton-link{
margin-top: 20px;
}
.card-skills , .skeleton-skills{
display: flex;
justify-content: space-between;
}
Step 3 - Adding the Card-specific styles.
(Font sizes, colors, etc)
.card-img{
background-color: #4F46E5;
}
.card-title{
font-size: 16px;
color: #334155;
}
.card-description{
font-size: 12px;
color: #64748B;
}
.card-skills .skill {
font-size: 12px;
font-weight: 600;
color: #475569;
}
.card-link{
font-size: 12px;
color: #4F46E5;
}
Step 4 - Adding the skeleton specific styles
(Here, we will specify the height, width, and background color of the skeletons.)
.skeleton-img{
animation: pulse 2s infinite ease-in-out;
}
.skeleton-description span:nth-child(1){
display: block;
width: 210px;
height: 10px;
background-color: #94A3B8;
}
.skeleton-description span:nth-child(2){
display: block;
width: 150px;
height: 10px;
background-color: #94A3B8;
margin-top: 5px;
}
.skeleton-skills .skill{
width: 65px;
height: 12px;
background-color: #94A3B8;
}
.skeleton-link{
width: 75px;
height: 12px;
background-color: #94A3B8;
}
Now The card and the skeleton should look like this
We are almost there! Now let's add the subtle animation on the skeletons
Step 5 - Adding the animation
@keyframes pulse {
0% {
background-color: #94A3B8;
}
50% {
background-color: #CBD5E1;
}
100% {
background-color: #94A3B8;
}
}
Now we can add this animation on all the skeletons and remove the background color.
// replace all styles from skeletons with these styles
.skeleton-title{
width: 150px;
height: 12px;
animation: pulse 2s infinite ease-in-out;
}
.skeleton-img{
animation: pulse 2s infinite ease-in-out;
}
.skeleton-description span:nth-child(1){
display: block;
width: 210px;
height: 10px;
animation: pulse 2s infinite ease-in-out;
}
.skeleton-description span:nth-child(2){
display: block;
width: 150px;
height: 10px;
animation: pulse 2s infinite ease-in-out;
margin-top: 5px;
}
.skeleton-skills .skill{
width: 65px;
height: 12px;
animation: pulse 2s infinite ease-in-out;
}
.skeleton-link{
width: 75px;
height: 12px;
animation: pulse 2s infinite ease-in-out;
}
Final Demo
Hope you find this useful in some way. I apologize for my writing I am really bad at explaining code π
Thank u so muchπ
Top comments (27)
Nice job!
Thanks!
It's great job. Keep it up.
Thank u!
Great
Thanks
Fantastic Post!
Thank u!
cool tutorial!, thank you so much
Thank u!
Love it and I understood it perfectly. Thank you.
Thank u!π
Nicee!
Real cool. Going to use it in my next project π
Thank uπ
Brilliant!
Thank u!
Awesome, just what i need, thank you so much π!
Thank u!π
Some comments may only be visible to logged-in visitors. Sign in to view all comments.