back to all posts

Create a Loading Animation with CSS

by Nabendu Biswas / September 18th, 2020

#css #beginners #webdev
Series: CSS-Projects

We will create a simple Jumping Loading Animation with CSS in this article. We will be using codepen for this project. So, open a new codepen project and add this basic html markup in it.

Jumping AnimationJumping Animation

Next, we will start with the CSS. We are creating three dots and centring them with the help of flexbox.


Now, we will add the jump animation by just adding the transform to y-axis, as shown in the below figure.


The jumping animation will show like below.

Jumping animationJumping animation

All the three dots are going up and down at the same time. But we want the second and the third to go up and down at a different interval. So, we will add delay to it.

animation delayanimation delay

And it will show this nice jumping animation.

Jumping animationJumping animation

This completes our mini article. You can find the code for the same in this codepen.

Nabendu Biswas