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;
}

--

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Introducing Upstate: Simplified State Management for Flutter

My life of Scrum (did not start with Scrum)

A four year Journey of my Engineering to becoming a Software Development Engineer

17 Use Short Iterations, Release in Increments

pointer-image

Walk2Earn.app joins DROPP Star LAND

(Pseudo-) Memory leaks when using OpenMP

Github and Unity

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Adaobi Osakwe

Adaobi Osakwe

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

More from Medium

Developing web page for the first time?

Learn Flex Box — Right Way

Write your first HTML program

My First HTML & CSS Challenge