DEV Community

Deepjyoti Barman
Deepjyoti Barman

Posted on


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>
Enter fullscreen mode Exit fullscreen mode

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;}
Enter fullscreen mode Exit fullscreen mode

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.

    position: absolute;
    top: 0;
    left: 0%;
    width: 5%;
    background: #3F51B5;
    height: 5px;
    animation: load-line 1s infinite;
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.


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%;
Enter fullscreen mode Exit fullscreen mode

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%;
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)

Timeless DEV post...

Git Concepts I Wish I Knew Years Ago

The most used technology by developers is not Javascript.

It's not Python or HTML.

It hardly even gets mentioned in interviews or listed as a pre-requisite for jobs.

I'm talking about Git and version control of course.

One does not simply learn git