Skelton loader is an animation technique that uses Skeleton, HTML, and CSS code. It is used to create a realistic movement of an object. The loading animation can be used in many different types of websites and it helps to improve the user experience.
Let's see the source code for the Skelton loader.
CSS Code:
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #1d1c1c;
font-family: Arial, Helvetica, sans-serif;
}
.card {
width: 250px;
background-color: #fff;
border-radius: 20px;
}
.img {
height: 150px;
border-radius: 20px;
}
.content {
padding: 2rem 1.8rem;
}
.title {
margin: 0 0 1rem;
font-size: 1.5rem;
line-height: 1.5rem;
}
.description {
font-size: 1rem;
line-height: 1.4rem;
}
.loader .img,
.loader .title,
.loader .description {
background-color: #ededed;
background: linear-gradient(100deg,
rgba(255, 255, 255, 0) 40%,
rgba(255, 255, 255, .5) 50%,
rgba(255, 255, 255, 0) 60%) #ededed;
background-size: 200% 100%;
background-position-x: 180%;
animation: 0.7s loader ease-in-out infinite;
}
@keyframes loader {
to {
background-position-x: -30%;
}
}
.loader h4 {
min-height: 1.6rem;
border-radius: 4px;
animation-delay: .05s;
}
.loader .description {
border-radius: 20px;
min-height: 2rem;
animation-delay: .07s;
}
HTML CSS Code:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link rel="stylesheet" href="style.css" /><title>SkeltonLoader</title></head><body><div class="card loader"><div class="img"></div><div class="content"><h4 class="title"></h4><div class="description"></div></div></div></body>
</html>
Output:
