Creating a super simple loader in Css

Creating a loader in css is as easy as eating a piece of cake.

1. Create a div ;

<div class="spinner"></div>

2.Add some style to the spinner div.

.spinner {

  border: 10px solid rgba(0, 0, 0, 0.1); //create border

  border-left-color: #2EB35A; // make only one side 

  border-radius: 50%; // makes the div looks like circle

  width: 50px;

  height: 50px;
}

To make the spinner rotate we need to add keyframe property.

@keyframes spin {

 0% {   
   transform: rotate(0deg); // at starting the div is rotated 0 deg
 } 

 100% {
  transform: rotate(360deg);//at end div will be rotated 360 deg
 }

}

Now lets add the animation to the spinner, now in the css the spinner class looks like.

.spinner {

  border: 10px solid rgba(0, 0, 0, 0.1); //create border

  border-left-color: #2EB35A; // make only one side

  border-radius: 50%; // makes the div looks like circle

  width: 50px;

  height: 50px;

  animation : spin 1s linear infinite; // it executes spin for 1s

}

Finally we have created super Awesome 😎 Spinner.

Follow Javascript Jeep🚙 🥶.