Writing Googles loading bar animation in CSS
Tags: tutorial, css, webdev, html
Published: 2020-02-08 06:53:50

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.

```html
<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

```css
.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.

```css
.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.

```css
@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

```css
@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

{% codepen https://codepen.io/deepjyoti30/pen/poJvPag default-tab=result %}

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.