Creating Skeleton Loading using HTML and CSS
Tags: css, codenewbie, webdev, ux
Published: 2021-10-30 08:03:35

## TLDR;

Final version of working code: [https://codepen.io/amitkhonde/pen/XWgjNeR](https://codepen.io/amitkhonde/pen/XWgjNeR)

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

React Github Link: [https://github.com/amitkhonde/skeleton-loading-demo](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](https://www.websitebuilderexpert.com/building-websites/website-load-time-statistics/) 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.

![skeleton-demo.gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x7140tc0502jzjn0hr06.gif)

### 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.

```html
<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.

```css
.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.

```css
@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](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations).*

### 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](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](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](https://www.youtube.com/watch?v=ZVug65gW-fc&ab_channel=WebDevSimplified)

The IT Guy's [Loading Placeholder Effect](https://www.youtube.com/watch?v=YTUuZg7NpZU&ab_channel=TheITGuy)

Kevin Mehta's [Skeleton Loader: An overview, purpose, usage and design](https://blog.prototypr.io/skeleton-loader-an-overview-purpose-usage-and-design-173b5340d0e1#:~:text=Why%20to%20use%20%3F,progress%20instead%20of%20waiting%20time.)

*This article was [originally published here](https://www.amitkhonde.com/blog/create-skeleton-loading-with-html-css). For more such interesting reads, [visit my blog](https://www.amitkhonde.com/blog).*