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.

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.

I eat. I read. I write. I code. Never in that order