Skeleton loader | skeleton loader html css code - codewithrandom

Skeleton loader | skeleton loader html css code - codewithrandom

Skeleton loader | skeleton loader html css code - codewithrandom


Welcome🎉 to Code With Random blog. In this blog, we learn that 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.

HTML 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>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 HTML code for the Skeleton loader. Now, you can see output without CSS, then we write css & javascript for Skeleton loader.
output
Skeleton loader | skeleton loader html css code - codewithrandom
blank screen is output of this simple html

CSS Code

 @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
Skeleton loader | skeleton loader html css code - codewithrandom

Skeleton loader | skeleton loader html css code - codewithrandom

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




Skeleton loader | skeleton loader html css code - codewithrandom

Skeleton loader | skeleton loader html css code - codewithrandom

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

Post a Comment

Previous Post Next Post