How to design Loader with html and css

you have been trying to design loader with html and css stay cool it is just simple logic.
if you look at the way loader work if you had learn much on css you must have understand that the key of it is Animation.
So let’s go into it.
Step1: Open your html tags and open nine div tags or more inside one div one after the other so that each of the div is place inside the other like the following code.

<div>
  <div>
    <div>
      <div>
    <div>
      <div>
        <div>
          <div>
        <div></div>
         </div>
       </div>
     </div>
       </div>
     </div>
   </div>
  </div>
</div>

Step2: give each of the div tag class name i.e the first div be main, second be loaderbox then container1,container2….. to the number of container you want Like the following :

<div class="main"> 
   <div class="LodearBox">
     <div class="container1">
       <div class="container2">
         <div class="container3">
           <div class="container4">
             <div class="container5">
               <div class="container6">
                 <div class="container7"></div>
               </div>
             </div>
           </div> 
         </div>
       </div>
     </div>
   </div>
 </div>
</div>

Step3: Now if you run the code it display nothing so never mind! Open a style tag to write the css or open css file to write the css below:

/*here is the code to set the color of the container1*/
.container1{
    border-top: 5px solid #ff0000 ;
}
/*here is the code to set the color of the container2*/

.container2{
    border: 5px solid orange ;
}
/*here is the code to set the color of the container3*/
.container3{
    border-top: 5px solid yellow ;
}
/*here is the code to set the color of the container4*/

.container4{
    border-top: 5px solid #00ff00 ;
}
/*here is the code to set the color of the container5*/

.container5{
    border-top: 5px solid #0000ff ;
    }
/*here is the code to set the color of the container6*/

.container6{  
    border-top: 5px solid yellow;
}
/*here is the code to set the color of the container7*/

.container7{
    border-top: 5px solid  red;
}

Step4:
If you run the code this time you should see a rectangle of different colors. Now we need to set the heights, widths, position and border radius for all of them By writing the following code:

/* we select all the containers so as not to write the same code for each of them*/ 
.container1,.container2,.container3,.container4,.container5,.container6,.container7 {
    position: absolute ;
    width:calc(100% - 20px);
    height:calc(100% - 5%);
    border-radius: 50%; /*this is to turn it to a circle */
    animation: circulating 6s ease infinite; /* this is our animation name for rotation*/
}

Step 5:
Run the code now you should see a big circle.
Now we need to write code for the animation i.e to deal with the rotation so write the following code:

/*@keyframes  is always mention before the animation name */
@keyframes circulating{
    100%{ 
        transform: rotate(-360deg); /* this means our circle should rotate at 360degree in anticlockwise direction*/
           }
}

Run the code you should see the circle rotating within 6seconds (the time set for the animation)

Step6: we need to set the height and the width of the circle as it is too big for what we need so we write the following code for the main-container.

.main{
    position: absolute ; /* to make borders very close to eachother*/
    width: 200px;
    height: 200px;
    left : 50%; /*to give space by the  left (margin left)*/
    top: 50%; /* to give space by the top (margin top)*/
    transform: translate(-50%,-50%);
    text-align: center;    
}

step7:
Run the code you should have a very small circle rotating but not that big enough? I know you will feel the same then let us increase the width of the loaderBox itself since the main-container is not display on the screen. So write the following code :

.LodearBox{
    position: relative ;
    width: 200%;
    height: 200% ;
}

Now run the code and see very beautiful circle rotating. Did you see it? Yes! You just do the hard part.
Step8:
Won’t it be nice if we write the word “loading” inside it? Now let us write the following code inside our Main container i.e after the closing loader box container tags.

<p>Loading...</p>

step9:
Run it did you see the “loading….” At the bottom of your screen so what can we do to put it inside the circle? No we need to give it margin-top and margin-left. So the following codes should do

p {margin-top: -200px;
margin-left: 133px;
font-size: 40px;
color: red:}