Skeleton loading elements using CSS

You must have seen grey boxes on the website before the actual content load on the webpage. This improves the user experience of web applications from the user's point of view, and it also indicates that some content is going load in place of those grey boxes. This is better than showing a blank page until the API gets the response or websites load its data.

You can show a spinner before loading the content, but showing these skeleton loaders is more efficient.

Here we are going to show you how to create these grey boxes with animation effect. You can create it with a few lines of HTML and CSS code.

HTML Code

First, we will add a div element and assign a class to it. The name of the class is sk_bg.

<div class="sk_bg big"></div>

CSS Code

We can add animation to our grey boxes using keyframes in CSS. We have created animation as sk_bg_animation. We are changing background-position for adding loading effect on our box.

.sk_bg {
   animation-duration: 1s;
   animation-fill-mode: forwards;
   animation-iteration-count: infinite;
   animation-name: sk_bg_animation;
   animation-timing-function: linear;
   background: #f6f7f8;
   background: linear-gradient(to right, #eee 8%, #ddd 18%, #eee 33%);
   background-size: 800px 104px;
   position: relative;
   width: 100%;
   margin-bottom: 10px;
}


@keyframes sk_bg_animation{
   0%{background-position:-468px 0}
   100%{background-position:468px 0}
}


.sk_bg.big {
   height: 96px;
}

Will the above code create a whole skeleton loader structure?

The code will create a single skeleton loading element. Full code to create multiple grey boxes structure as shown in the image is as below.

Full HTML Code

<div class="container">
   <div class="cols">
      <div class="col">
          <div class="sk_bg big"></div>
          <div class="sk_bg small"></div>
          <div class="sk_bg small2"></div>
      </div>
      
      <div class="col">
          <div class="sk_bg big"></div>
          <div class="sk_bg small"></div>
          <div class="sk_bg small2"></div>
      </div>
      
      <div class="col">
          <div class="sk_bg big"></div>
          <div class="sk_bg small"></div>
          <div class="sk_bg small2"></div>
      </div>
      
      <div class="col">
          <div class="sk_bg big"></div>
          <div class="sk_bg small"></div>
          <div class="sk_bg small2"></div>
      </div>
   </div>
  
   <div class="cols">
      <div class="col">
          <div class="sk_bg big"></div>
          <div class="sk_bg small"></div>
          <div class="sk_bg small2"></div>
      </div>
      
      <div class="col">
          <div class="sk_bg big"></div>
          <div class="sk_bg small"></div>
          <div class="sk_bg small2"></div>
      </div>
      
      <div class="col">
          <div class="sk_bg big"></div>
          <div class="sk_bg small"></div>
          <div class="sk_bg small2"></div>
      </div>
      
      <div class="col">
          <div class="sk_bg big"></div>
          <div class="sk_bg small"></div>
          <div class="sk_bg small2"></div>
      </div>
   </div>
</div>

Full CSS Code

.container {
   max-width: 1024px;
   margin: 50px auto;
   text-align: center;
}


.cols {
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 30px;
}


.col {
   margin: 0 15px;
   width: 200px;
}


.sk_bg {
   animation-duration: 1s;
   animation-fill-mode: forwards;
   animation-iteration-count: infinite;
   animation-name: sk_bg_animation;
   animation-timing-function: linear;
   background: #f6f7f8;
   background: linear-gradient(to right, #eee 8%, #ddd 18%, #eee 33%);
   background-size: 800px 104px;
   position: relative;
   width: 100%;
   margin-bottom: 10px;
}


.sk_bg.big {
   height: 96px;
}


.sk_bg.small {
   height: 20px;
}


.sk_bg.small2 {
   height: 15px;
}


@keyframes sk_bg_animation{
   0%{background-position:-468px 0}
   100%{background-position:468px 0}
}


@-webkit-keyframes sk_bg_animation{
   0%{background-position:-468px 0}
   100%{background-position:468px 0}
}

That's it