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.

.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

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.

.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

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.