Skeleton Screen Loading Animation using HTML & CSS

This tutorial is written based on this article. Original author is Shantanu Jana.

In this article I have shown how Skeleton Screen Loading Animation is created using HTML CSS and JavaScript. I created this animation on a profile card.

You will see various websites where you can see Skeleton Loading Animation before loading any element. Undoubtedly it enhances the quality and beauty of the website a lot. You need to have a basic idea about HTML and CSS to make it.

I have shown this kind of effect before but it was not effective. In this case I have used JavaScript to make it work.

This Skeleton Screen Loading Animation will continue for three seconds when you open the web page. After three seconds this effect is off and all the information on the profile card can be seen.

Design the web page

To create this animation, I first designed the webpage with CSS code. Here I have used light blue as the background color of the web page.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #eff7f2;
  font-family: "Lato", sans-serif;
}