How to Make Skeleton Loaders

I am not even sure when Medium switched to using Skeleton Loaders, but they do now. Facebook, Instagram, XendFinance. It is beautiful. It makes your site look like it is loading faster than it actually is and very easy to make. Don’t believe me? Let’s make one!

You can check it out in this codepen.

The first thing you need to decide when making a skeleton loader is what the wireframe of the design should look like. Knowing this helps you decide the height and width and the distance between each block.

The “magic” of the skeleton loaders is the background image and the animation.

background-image: linear-gradient(90deg, #ddd 0px, #e8e8e8 40px, #ddd 80px);

Set each block to a background image of a linear gradient. A linear gradient takes at-least three arguments — The direction, colorstop1, colorstop2 …. and this gives each block the illusion of starting to load.

Next, we need to animate. We do this by moving the background-position linearly and infinitely. You can set to any speed you want, I think that 1.6secs works and that’s it. Your finished code should be a variety of this.

HTML -
<div class="card">
  <div class="skeleton">
    <div class="t-white mast">
      <p class="skeleton-name"></p>
      <p class="skeleton-location"></p>
    </div>
  </div>
</div>
CSS -
.card {
  margin: 0 auto;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  border-radius: 8px;
  width:250px;
  height: 100px;
  background-color: #eee;
  margin-top:50px;
}
@keyframes animate-loader {
  0% {
    background-position: -100px;
  }
  40%,
  100% {
    background-position: 270px;
  }
}
.skeleton {
  background-color: #eee;
  padding: 2px 16px;
  
}
.skeleton-name {
  width: 200px;
  height: 20px;
  background-image: linear-gradient(90deg, #ddd 0px, #e8e8e8 40px, #ddd 80px);
  animation: animate-loader 1.6s infinite linear;
  background-size: 300px;
}
.skeleton-location {
  width: 200px;
  height: 10px;
  background-image: linear-gradient(90deg, #ddd 0px, #e8e8e8 40px, #ddd 80px);
  animation: animate-loader 1.6s infinite linear;
  background-size: 300px;
}