Writing Googles loading bar animation in CSS

I've always been fascinated by Googles loading bar animation and a few days ago I was implementing a form on my page when I thought, why not add a loading animation like Googles.

So I thought about the animation for a while and then started implementing it. It was far from perfect at the first shot, but then as I made changes it got better.

Let's start with the code now.

We will declare a div with the class animation-load which we will place at the top of the div that we want the animation to happen on.

<div class="animated-load"></div>

This is necessary because we are going to put the bar on top of the div.
We can later make it appear by adding some minimal JS stuff but let's leave that for later.

Designing the class

Before we define our animation class, make sure the parent div's position is set to absolute

.parent {position: fixed;}

We are going to make the top to 0 so that the div is exactly at the top of the parent div.

We can set the width according to our preference.

.animated-load{
    position: absolute;
    top: 0;
    left: 0%;
    width: 5%;
    background: #3F51B5;
    height: 5px;
    animation: load-line 1s infinite;
}

Height is an important factor and 5px seems perfect, change it accordingly.

Now, the most important part. The animation. We are going to define the animation ourselves by using keyframes.

It will complete in 1s and then run infinitely as shown here

animation: load-line 1s infinite

Yes, I named the animation load-line.

NOTE: It is set to infinite so that it can run infinitely till we do a process in the background and once the process is done, we will just hide the div and it will go back to normal.

Animation

When observed properly, the animation is really simple. In it, the bar width increase as it moves to around 50% width of the div and accordingly it decreases in width, thus giving us the illusion of a loading bar.

I considered dividing the animation into a 5 step process.

So that means we will move by multiples of 20. However, I'm going to start from 5 instead of 0.

@keyframes load-line {
    0% {
        width: 5%;
        left: 1%;
    }

At 0%, we will just start increasing the width and make it move towards the left.

As we move to 20%, we will increase the width and move it a bit more to the left and go on doing that accordingly till we reach 100%.

Here's the complete code of the keyframe

@keyframes load-line {
    0% {
        width: 5%;
        left: 1%;
    }
    20% {
        width: 15%;
        left: 15%;
    }
    40% {
        width: 35%;
        left: 20%;
    }
    60% {
        width: 40%;
        left: 40%;
    }
    80% {
        width: 30%;
        left: 70%;
    }
    100% {
        width: 10%;
        left: 90%;
    }
}

Now if we run the above code we will get an animation like this

And that's how simple it is to implement it.

In case you want to enable the animation on click of some button, use JavaScript to do that.

First change the name of the class from animated-load to something like animated-load-pre.

Now use this name to change the class to animated-load when the button is clicked.