Loading animations in vanilla CSS

Loaders are quite common web components that we see on the web. It presents a really decent UX and make the client aware of something being loaded. In this blog we will see how to create some of the very basic loading animations in pure CSS.

- Ring Loader

STEP-1:

Create a square box, with a different border-color on any one of the sides.

.loader-1 {
height: 100px;
width: 100px;
border: 10px solid #ccc;
border-right-color: #673AB7;
}

STEP-2:

Add border-radius to make it circular.

.loader-1 {
height: 100px;
width: 100px;
border: 10px solid #ccc;
border-right-color: #673AB7;
/* adding border-radius */
border-radius: 50%;
}

STEP-3: Now we just need to add animation with a keyframe containing rotate.

- Dual Ring Loader

.loader-2 {
width: 100px;
height: 100px;
border-radius: 50%;
border: 6px solid #673AB7;
/* alternate border-color for four different sides */
border-color: #673AB7 transparent #673AB7 transparent;
animation: rotate 1.5s linear infinite;
}

- Bouncing Bars Loader

This loader primarily involve 3 divs/bars whose height and top is changed in keyframes along with a delay in the animation for each of them.

- Conclusion

Originally published at https://blog.akhilgautam.me.

I am a fullStack developer building things at BigBinary using Ruby on Rails and React.js .