Creating a simple loading placeholder animation using SCSS

Yasser Shaikh
Aug 2, 2018 · 2 min read

Whenever using a slow internet connection, it is very common to see placeholder loading animation effect on various sites like Facebook, LinkedIn, Instagram etc. These placeholders provide good UX, it gives users a sense of what to expect where on the page when the loading finishes.

Placeholder loading image animation on Facebook.

In this post, I want to share the implementation of a similar kind of animation.

Implementation

Below is the HTML and SCSS you will need to get the same effect, switch tabs to see the result. (In case you are interested in understanding how it all works, scroll down to the bottom of the post)

Understanding how it works

We have used transform: translateX(0) in our CSS. translateX defines a 2D translation, moving the element along the X-axis. See the screenshot below —

So basically, we have a new div over an existing div which is using keyframes to transform from X (horizontally) -100% to 100%.

@keyframes loading-placeholder {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}

Next, is how do they animate and that too continuously. We have used CSS animation for that, where we have set animation duration of 1.5 seconds, using the above defined keyframes and running this animation inifinite number of iterations.

animation: 1.5s loading-placeholder ease-in-out infinite;

This article beautifully explains animations, do check it out.

Yasser Shaikh's blog

It's supposed to be automatic, but actually you have to push this button.

Yasser Shaikh

Written by

Yasser Shaikh's blog

It's supposed to be automatic, but actually you have to push this button.