Creating a simple loading placeholder animation using SCSS

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.

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)

https://jsfiddle.net/yrshaikh/241kvhjo/show

Understanding how it works

We have used transform: translateX(0)in our CSS. translateX d efines 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%.

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.