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;


<!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>


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!

Are you looking for Front-end Developer Job?

Get Front-end Interview Kit Now, And Be Prepared to Get Your Dream Job

Get Front-end Interview Kit

Newsletter for Developers!

Join our newsletter to get important Web Development and Technology Updates