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

Most of the animations are based on two properties: borders and keyframes.

STEP-1:

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

STEP-2:

Add border-radius to make it circular.

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

- Dual Ring Loader

All we need to do to create a dual-ring loader is to alternate the border-color with transparent in between. border-color can take upto four different colors as value which are then set as an element's four sides.

- 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

There is no limit to creativity. We can create all different kind of loaders by changing its CSS properties in keyframes.

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

Written by

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store