Creating Skeleton Loading using HTML and CSS

TLDR;

Final version of working code: https://codepen.io/amitkhonde/pen/XWgjNeR

React CodeSandbox Link: https://codesandbox.io/s/skeleton-loading-demo-6dwee

React Github Link: https://github.com/amitkhonde/skeleton-loading-demo

Introduction

In today's web development world, making sure that the users are hooked to your website is the most important thing. And to achieve that, designers and developers come up with the most aesthetically pleasing UIs.

But, another thing that goes hand in hand with great UI is relevant information. With so much increase in the amount of data to process today, even the most powerful servers take a second to send back the data.

And this is the tricky part of engaging user experience. NOBODY LIKES TO WAIT. A recent study found out that a 1-second delay in the page load reduces customer satisfaction by 16%. And 46% of users do not revisit the websites with poor loading time.

To overcome this problem, UX engineers came up with the solution of Skeleton Loading. As the name suggests, skeleton loading shows the user a skeleton of what is going to come on the screen and how it is structured.

This serves 2 purposes:

1. The user is engaged via some cool animation.
2. Users know where to expect information because the skeleton shows where the content would appear.

In this post, we are going to look at how to create the skeleton loading effect using CSS animations. And as a bonus, I will link a CodeSandbox project and a Github repository on how I have used it in React. Let us get started.

Creating Skeleton Loading with HTML and CSS

First of all, let us see what our result will look like and then get to it step by step. For the purpose of learning, we will develop a user card which shows skeleton loading until the data is received.

Step 1: Adding HTML Markup

In this step, we are just adding the basic HTML markup you see in the above image. We have one parent div with a class user-card. This serves as the container for all content. Inside user-card, we have 3 elements.

1. div for user’s profile picture.
2. paragraph for user’s name.
3. paragraph for user’s email.

That is it. No fancy stuff here. Let us look at the code to understand it better.

<div class="user-card">
  <div class="profile-pic"></div>
  <p class="name"></p>
  <p class="status"></p>
<div>

Step 2: Adding Skeleton class CSS

In this step, we will be adding the CSS for our user-card and its children elements. For the user-card, we are adding some basic paddings and borders. And for each child, we are adding min-width and min-height.

Adding min-width and min-height properties to the children is very important because if the content is not present in any of the elements, they will remain empty.

Also in this step, we are adding basic styling for the skeleton class. This is the class that will take care of showing the loading animation. We are giving our skeleton class the background-color #A5A5A5. And adding an animation property animation: skeleton-animation 1s infinite ease-in-out which signifies 4 things:

1. The name of the animation.
2. Duration of the animation.
3. Frequency of the animation.
4. The transition timing function ease-in-out signifies that our animation will run slow at start and end.

On whichever element we want to show the skeleton loading animation, we have to add the class skeleton.

Let us take a look at what our current CSS looks like and in the next step, we will add the actual animation.

.user-card {
  padding: 8px 16px;
  border: 1px solid #a5a5a5;
  border-radius: 3px;
  max-width: 200px;
  text-align: center;
}

.user-card .profile-pic {
  height: 100px;
  width: 100px;
  border-radius: 100%;
  margin: auto;
}

.user-card .name, .user-card .status {
  min-width: 100px;
  min-height: 24px;
}

.user-card > * {
  margin: 16px 0px;
}

.skeleton {
  background-color: #a5a5a5;
  animation: skeleton-animation 1s infinite ease-in-out;
}

Step 3: Adding the animation

This is the final and the most important step. We are going the add the actual animation in this step. The name of our animation is skeleton-animation (as defined in the previous step). And in that animation, we are going to define the stages 0%, 50%, and 100%. The CSS in these stages defines how our element looks at that particular stage.

1. At 0%, we are setting the opacity to 0.2.
2. At 50% we increase the opacity to 0.5.
3. And at 100% we again bring back the opacity to 0.2.

Doing this will give our element a look like it is getting removed and added continuously. Which is the exact skeleton loading effect we want. Now enough with the theory. Let us check the code and jump to what the final version of our code will look like.

@keyframes skeleton-animation {
  0% {
    opacity: 0.2;
  }

  50% {
    opacity: 0.5;
  }

  100% {
    opacity: 0.2;
  }
}

Note: If you are unaware of the CSS animations, I highly recommend going through this MDN tutorial.

Final Code

Yay!! We are now done with all the steps and our skeleton loading is ready. Let us look at the final code and the result.

https://codepen.io/amitkhonde/pen/XWgjNeR

Bonus: How I used Skeleton in an Actual React Project

Now that we have learned the basics of how we can add the loading animation, here is a react example project where I have used this animation. In this project, I fetch the list of users from a dummy API and until that is done, skeleton loading is shown for an engaging user experience. Feel free to edit and improve the code.

React CodeSandbox Link: https://codesandbox.io/s/skeleton-loading-demo-6dwee

Conclusion

Well I know there are a lot of ways we can achieve the skeleton loading effect. And there are also many libraries available we can use for achieving this. But, in my opinion, it is very important that we know the basics of what we are using. Comment down below on how you have approached this problem in your projects. And if you want to learn more about Skeleton loading, check out the links provided at the end. Until then, Happy Coding!!

Further Readings and Videos

Web Dev Simplified's How To Create Skeleton Loading Animation With CSS

The IT Guy's Loading Placeholder Effect

Kevin Mehta's Skeleton Loader: An overview, purpose, usage and design

This article was originally published here. For more such interesting reads, visit my blog.

Comments

[Yaro]

Total bullshit! It's not at all clear how to integrate this into your template 🤦‍♂️🤦‍♂️🤦‍♂️