Create a Skeleton Loading Effect with HTML/CSS

Create a skeleton loader – React JS, Angular, HTML/CSS

by

In this blog, we will see how to create a skeleton loader for a web page irrespective of the platform. We will be working on skeleton loader CSS so it can be implemented in almost all of your projects that are you might have developed on React JS, Angular, HTML/CSS or any other JS or CSS frameworks like Bootstrap etc. Often while loading a page, you might have come across this loader. Before implementing a skeleton loader, we have to see what kind of content our web page is loading or going to have once it’s loaded successfully. For example, a headliner and a teaser text within a blogroll.

We need to abstractly know the data-elements, display boxes and the shapes in which our data will be loaded in the web page. Only after we have a good understanding of this, we can proceed to create a skeleton loader.

One can also show a loading spinner on the webpage to show that page is loading the data and the another way to make an interesting loading effect you can show the skeleton loading to the user.

Let’s start coding now.

First create an HTML file and copy paste the code given below.

HTML

<article class="wrapper">
    <h1 class="headline loading-grad" </h1>
    <div class="line loading-grad"></div>
    <div class="line loading-grad"></div>
    <div class="line line--half loading-grad"></div>
</article>

Code

Here we have kept one headline and three line texts at its bottom. Now let’s add CSS to it.

.wrapper{
  box-shadow: 5px 5px 20px rgba(0,0,0,.5); 
  padding:2rem;
  margin: 20px auto;
  border-radius: 10px;
  background: #292D3E;
  width: 800px;
  height: 250px;
  overflow: hidden;
  box-sizing: border-box;
  .headline{
    margin: 0;
    box-sizing: border-box;
    height: 55px;
    border-radius: 5px;
    margin-bottom: 1.1rem;
    overflow: hidden;
  }
  .line{
        height: 23px;
        border-radius: 3px;
        margin-bottom: .6rem;
        overflow: hidden;
        &--half{
            width: 70%;
        }
    }
}

.loading-grad{
    background: linear-gradient(to right,rgba(0, 0, 0, 0), rgba(0, 0, 0, 0),rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)) repeat-x;
    background-size: 400% 100%;
  overflow: hidden;
    animation: scroll 1.5s infinite;
}

@keyframes scroll{
    100%{
        background-position: 100% 0%;
    }
}

A good understanding of keyframes, and CSS animation is required to know how the code works.
The final output looks like this:

Output/Demo

See the Pen Article Loading by Elias Günther (@EliasGuen) on CodePen.

Complete the code and check in your browser how the skeleton loader works. Hope you have had fun doing this mini web component.

Comment down your queries and doubts, we are always happy to help.

Happy learning

Credits: Elias Günther / Eliaslog.pw

Leave a Comment