Social Media has become a crucial part of our day to day lives, especially for youths they spend most of the time in scrolling social media platform such as Instagram, Facebook, Twitter etc. But when we open the social media we see that while loading the home page the structure is present but the components are loading for a seconds or minutes.

Skeleton Screen using HTML & CSS ( Source Code)

This process is called Skeleton Screen and this design is called Skeleton Screen CSS. So Hey Coders Welcome back to Codewithrandom In this blog we are going to learn how to build skeleton CSS. I hope you have got an idea about the project.

HTML Code For Skeleton Screen

<div class="container">
  <div class="skeleton"></div>
  <div class="info">
    <div class="skeleton"></div>
    <div class="skeleton" style="width: 70%"></div>
    <div class="skeleton" style="width: 50%"></div>
  </div>
</div>

In this structure we have create a container used the div tag and created 3 skeletons and specified a width for it. Lets style the Skeleton CSS Project using CSS.

50+ Front-end Projects With Source Code | Front-end Projects With Source Code

CSS Code For Skeleton Screen

/* Skeleton CSS */
@keyframes skeleton-animation {
  0% {transform: translateX(-100%);}
  50% {transform: translateX(200%);}
  100% {transform: translateX(-100%);}
}
.skeleton {
  background-color: #cacced;
  overflow: hidden;
  border-radius: 5px;
}
.skeleton::before {
  display: block;
  content: "";
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), #dadae8, rgba(255, 255, 255, 0));
  animation: skeleton-animation 1.25s ease-in-out infinite;
}



/* Not interesting CSS */
html {
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  background-size: cover;
  background-repeat: no-repeat;
  background: linear-gradient(45deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%);
}
.container {
  display: grid;
  grid-template-columns: 28% 70%;
  grid-gap: 2%;
  background-color: #f7f7f7;
  box-shadow: 
     2px 2px 6px rgba(100,100,100,.5),
     0 0 6px rgba(100,100,100,.5);
  padding: 10px;
  width: 500px;
  height: 150px;
}
.container > .info {
  display: grid; 
  grid-template-rows: 40px 30px 20px; 
  grid-row-gap: 10px;
  padding: 20px 0 20px 0;
}

In this CSS Code we have aligned all the skeletons which has defined in the HTML Code and set the padding and alignment so that it doesn’t get messy and the output should be displayed properly. Lets see the final output.

Final Output Skeleton Screen

We have Successfully created our CSS Skeleton using HTML5 & CSS3 | Skeleton CSS. You can use this project for your personal needs and the respective lines of code are given with the code pen link mentioned above.

Create Otp Input Field Html Css Javascript ( Source Code)

If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Written By – Harsh Sawant

Code By – Andres Cami