Hello readers, Today in this blog you'll learn how to create Skeleton Loading Screen Animation using only HTML & CSS. Earlier I have shared a blog on how to create a drag and drop list or draggable list in javascript and now it's time to create skeleton loading screen animation.
A skeleton loading screen is the user interface (UI) that doesn't hold actual content; instead, it animates the page's layout by showing its elements in shape similar to the actual content as it is loading and becoming ready.
In this program [Skeleton Loading Screen Animation], on the webpage, there is showing skeleton loader by its element shape. This is a pure CSS program, so this skeleton screen doesn't load actual content but you can easily show your content by removing this skeleton layer when the content loaded completely.
You can copy the codes from the given boxes or download the code files from the given link but I recommend you to download the source code files instead of copying codes. Click here to download code files.
You might like this:
Creative Circular Progress Bar
Pure CSS Windows Preloader Design
Heart Shape CSS Animated Preloader
Animated Gradient Shiny Ring Loader
HTML CODE:
<!DOCTYPE html>
<!-- Created By CodingNepal - www.codingnepalweb.com -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <title>Skeleton Loading Animation | CodingNepal</title> -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="card">
<div class="header">
<div class="img"></div>
<div class="details">
<span class="name"></span>
<span class="about"></span>
</div>
</div>
<div class="description">
<div class="line line-1"></div>
<div class="line line-2"></div>
<div class="line line-3"></div>
</div>
<div class="btns">
<div class="btn btn-1"></div>
<div class="btn btn-2"></div>
</div>
</div>
</body>
</html>
CSS CODE:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.card{
max-width: 350px;
width: 100%;
background: #fff;
padding: 30px;
border-radius: 10px;
border: 1px solid #d9d9d9;
}
.card .header{
display: flex;
align-items: center;
}
.header .img{
height: 75px;
width: 75px;
background: #d9d9d9;
border-radius: 50%;
position: relative;
overflow: hidden;
}
.header .details{
margin-left: 20px;
}
.details span{
display: block;
background: #d9d9d9;
border-radius: 10px;
overflow: hidden;
position: relative;
}
.details .name{
height: 15px;
width: 100px;
}
.details .about{
height: 13px;
width: 150px;
margin-top: 10px;
}
.card .description{
margin: 25px 0;
}
.description .line{
background: #d9d9d9;
border-radius: 10px;
height: 13px;
margin: 10px 0;
overflow: hidden;
position: relative;
}
.description .line-1{
width: calc(100% - 15%);
}
.description .line-3{
width: calc(100% - 40%);
}
.card .btns{
display: flex;
}
.card .btns .btn{
height: 45px;
width: 100%;
background: #d9d9d9;
border-radius: 25px;
position: relative;
overflow: hidden;
}
.btns .btn-1{
margin-right: 8px;
}
.btns .btn-2{
margin-left: 8px;
}
.header .img::before,
.details span::before,
.description .line::before,
.btns .btn::before{
position: absolute;
content: "";
height: 100%;
width: 100%;
background-image: linear-gradient(to right, #d9d9d9 0%, rgba(0,0,0,0.05) 20%, #d9d9d9 40%, #d9d9d9 100%);
background-repeat: no-repeat;
background-size: 450px 400px;
animation: shimmer 1s linear infinite;
}
.header .img::before{
background-size: 650px 600px;
}
.details span::before{
animation-delay: 0.2s;
}
.btns .btn-2::before{
animation-delay: 0.22s;
}
@keyframes shimmer {
0%{
background-position: -450px 0;
}
100%{
background-position: 450px 0;
}
}
Top comments (1)
Great tutorial! I appreciate how you broke down each step, making it easy to follow. The explanation of form validation is especially helpful, as it ensures user inputs are correct before submission. I am a student of Best International Schools in Bangalore. Would love to see more examples like this for other types of elements. Keep up the good work!