Skeleton Loader Using HTML, CSS, And JavaScript

Skeleton Loader Using HTML, CSS, And JavaScript

Welcome to Code With Random blog. In this blog, we learn how we create a Skeleton loader. We use HTML, CSS, and JavaScript for this Skeleton loader. Hope you enjoy our blog so let’s start with a basic HTML structure for a Skeleton loader.

We’ll show you how to make a Skeleton Loader Using HTML, CSS, And JavaScript with complete source code available for you so you just copy and paste it into your project.

Skeleton loader | skeleton loader html css code - codewithrandom

 

 

HTML Code For Skeleton Loader

<!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>Skeleton loader</title>
</head>
<body>
<div class="card">
<div class="card-header animated-bg" id="header">&nbsp;</div>
<div class="card-content">
<h3 class="card-title animated-bg animated-bg-text" id="title">
&nbsp;
</h3>
<p class="card-excerpt" id="excerpt">
&nbsp;
<span class="animated-bg animated-bg-text">&nbsp;</span>
<span class="animated-bg animated-bg-text">&nbsp;</span>
<span class="animated-bg animated-bg-text">&nbsp;</span>
</p>
<div class="author">
<div class="profile-img animated-bg" id="profile_img">&nbsp;</div>
<div class="author-info">
<strong class="animated-bg animated-bg-text" id="name"
>&nbsp;</strong
>
<small class="animated-bg animated-bg-text" id="date">&nbsp;</small>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

 

There is all the HTML code for the Skeleton loader. Now, you can see output without CSS, then we write CSS & JavaScript for the Skeleton loader.

output

Skeleton loader | skeleton loader html css code - codewithrandom
blank screen is the output of this simple HTML

CSS Code

a

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
* {
    box-sizing: border-box;
}
body {
    background-color: #ecf0f1;
    font-family: "Roboto", sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
    margin: 0;
}
img {
    max-width: 100%;
}
.card {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    overflow: hidden;
    width: 350px;
}
.card-header {
    height: 200px;
}
.card-header img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}
.card-content {
    background-color: #fff;
    padding: 30px;
}
.card-title {
    height: 20px;
    margin: 0;
}
.card-excerpt {
    color: #777;
    margin: 10px 0 20px;
}
.author {
    display: flex;
}
.profile-img {
    border-radius: 50%;
    overflow: hidden;
    height: 40px;
    width: 40px;
}
.author-info {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-left: 10px;
    width: 100px;
}
.author-info small {
    color: #aaa;
    margin-top: 5px;
}
.animated-bg {
    background-image: linear-gradient(
        to right,
        #f6f7f8 0%,
        #edeef1 10%,
        #f6f7f8 20%,
        #f6f7f8 100%
    );
    background-size: 200% 100%;
    animation: bgPos 1s linear infinite;
}
.animated-bg-text {
    border-radius: 50px;
    display: inline-block;
    margin: 0;
    height: 10px;
    width: 100%;
}
@keyframes bgPos {
    0% {
        background-position: 50% 0;
    }
    100% {
        background-position: -150% 0;
    }
}

Now we have completed our CSS section,  Here is our updated output CSS.

output

 

Javascript code

const header=document.getElementById('header') const title=document.getElementById('title') const excerpt=document.getElementById('excerpt') const profile_img=document.getElementById('profile_img') const name=document.getElementById('name') const date=document.getElementById('date') const animated_bgs=document.querySelectorAll('.animated-bg') const animated_bg_texts=document.querySelectorAll('.animated-bg-text') setTimeout(getData, 2500) function getData() {
    header.innerHTML='<img src="https://source.unsplash.com/1600x900/?nature,water" alt="" />'title.innerHTML='google codewithrandom'excerpt.innerHTML='go to google and search or type codewithrandom for project code ,also i share 100+ frontend project code'profile_img.innerHTML='<img src="https://source.unsplash.com/1600x900/?nature,water" alt="" />'name.innerHTML='CODEWITHRANDOM'date.innerHTML='22jan 2021'animated_bgs.forEach((bg)=> bg.classList.remove('animated-bg')) animated_bg_texts.forEach((bg)=> bg.classList.remove('animated-bg-text'))
}

 

Final output

 

 

Now we have completed our javascript section,  Here is our updated output with javascript. Hope you like the Skeleton loader. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.

In this post, we learn how to create a Skeleton loader using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki 

Code by – traverse media

 

Leave a Reply