Interwind Loading Animation

The theme for week #4 of the Weekly Coding Challenge is:

Loading Animations

Every time something is loading on a website it's a good practice to give some sort of feedback to the user, make him aware that his request is being processed. Most of the time you'll use this when the user makes a request to the server.

In this article we're going to create an Interwind Loading Animation:

https://codepen.io/FlorinPop17/pen/NJJoYx

If you want to participate in this challenge, I highly recommend that you create your own loading animation and not copy/paste the code for this one. Be creative! This way you'll learn more

The HTML

The HTML structure will contain a .loading-container and two .circles within it.

<div class="loading-container">
    <div class="circle"></div>
    <div class="circle"></div>
</div>

The CSS

First, let's add the basic styles for the .circles:

.circle {
    background-color: purple;
    border-radius: 50%;
    display: inline-block;
    margin: -10px;
    height: 40px;
    width: 40px;
}

.circle:nth-of-type(2) {
    background-color: palevioletred;
}

We're basically having two circles next to each other (hence the display: inline-block property). The 2nd circle has a different background-color.

Also the negative margin is used to reduce the space between the circles (this will be more obvious when we'll animating it).

The animation

The trick to this animation is that we want to have the .loading-container have a higher height then the height of it's children elements. This way we can set the transform-origin property and rotate around the bottom center point of the div creating a nice effect:

.loading-container {
    animation: rotate 3s linear infinite;
    height: 50px;
    transform-origin: bottom center;
}

@keyframes rotate {
    to {
        transform: rotate(360deg);
    }
}

Once the rotate gets to 100%, it will start over, and because 0deg(which is by default) === 360deg we won't notice the change.

Now, let's make the .circles grow and shrink over and over:

.circle {
    /* The CSS from above */

    /* New CSS */
    animation: grow 1.5s linear infinite;
    transform: scale(0);
}

.circle:nth-of-type(2) {
    animation-delay: 0.75s;
}

@keyframes grow {
    50% {
        transform: scale(1);
    }
}

As you can see, initially the .circles are hidden by setting the scale property to 0. Then in the keyframes at the 50% mark we grow it back to it's initial size be setting it to 1.

Also on the 2nd circle we have an animation-delay property set. It will make the animation start only after 0.75 seconds. (Half of the time it takes the animation to complete. This way while the first circle is growing, the other one is shrinking, clever, eh? 😆).

Conclusion

This week's challenge is the easiest so far, but you can go wild and create some awesome Loading Animations. The sky is the limit.

I also wrote an article a while back where you can learn how to create more Loading Animations.

I hope you enjoyed this little project! Don't forget to share your submissions with me!

Happy Coding! 😇