Akhil

Akhil

Loading animations in vanilla CSS

Loading animations in vanilla CSS

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

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:

Screenshot 2020-12-05 at 9.15.54 PM.png 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:

Screenshot 2020-12-05 at 9.17.04 PM.png 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

Screenshot 2020-12-05 at 10.43.45 PM.png 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.

Interested in reading more such articles from Akhil Gautam?

Support the author by donating an amount of your choice.

Recent sponsors
 
Share this
Proudly part of