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 Animation

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

Centring

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

transform

The jumping animation will show like below.

Jumping 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 delay

And it will show this nice jumping animation.

Jumping animation

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