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.
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.
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.
And it will show this nice jumping animation.
This completes our mini article. You can find the code for the same in this codepen.