Skelton Loader Animation with HTML and CSS Code

Skelton Loader Animation with HTML and CSS Code

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:


Resources for You

ChatGPT Guide For Software Developers

Learn to use ChatGPT to stay ahead of competition

Front-End Developer Interview Kit

Today, Start preparing to get your dream job!

JavaScript Developer Kit

Start your JavaScript journey today!

Master JavaScript by Solving Daily Challenges

Challenge Yourself Daily: Advance Your JavaScript Skills and Career

View Challenges

Newsletter for Developers!

Join our newsletter to get important Web Development and Technology Updates