*,
*::after,
*::before{
   box-sizing: border-box;
}

body{
   margin: 0;
   padding: 0;
   min-height: 100vh;
   height: auto;
   background: #333;
}

h2{
   text-align: center;
   color: #fff;
   font-size: 2.3rem;
}

#loader-box{
   padding: 1rem;
   border: 0.1rem solid #0c0c2c;
   margin: 0 auto 1rem;
   border-radius: 0.4rem;
   width: 60%;
   display: flex;
   align-items: center;
   justify-content: center;
}

/* Loader One */
.loader-one{
   display: inline-block;
   width: 50px;
   height: 50px;
   border-radius: 50%;
   border: 3px solid;
   border-color: #000 #e74c3c #000 #000;
   animation: rotation_one 0.7s linear infinite;
}

/* Loader Two */
.loader-two{
   display: inline-block;
   position: relative;
   width: 50px;
   height: 50px;
   border-radius: 50%;
   border: 3px solid;
   border-color: #e74c3c #000 #e74c3c #000;
   animation: rotation_two 0.7s linear infinite;
}

/* Loader Three */
.loader-three{
   display: inline-block;
   width: 50px;
   height: 50px;
   position: relative;
   border-radius: 50%;
   border: 3px solid;
   border-color: #e74c3c transparent #e74c3c transparent;
   animation: rotation_three 0.7s linear infinite;
}
.loader-three::after{
   content: '';
   position: absolute;
   margin: auto;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   width: 42px;
   height: 42px;
   border: 3px solid;
   border-radius: 50%;
   border-color: transparent #09e transparent #09e;
   animation: rotation_three_back 0.4s linear infinite;
   transform-origin: center center;
}

/* Loader Four */
.loader-four{
   display: inline-block;
   position: relative;
   width: 50px;
   height: 50px;
   border-radius: 50px;
   border: 10px solid;
   animation: rotation_four 1s linear infinite alternate;
}

@keyframes rotation_one{
   0%{
      transform: rotate(0deg);
   }
   100%{
      transform: rotate(360deg);
   }
}

@keyframes rotation_two{
   0%{
      transform: rotate(0deg);
   }
   100%{
      transform: rotate(360deg);
   }
}

@keyframes rotation_three{
   0%{
      transform: rotate(0deg);
   }
   100%{
      transform: rotate(360deg);
   }
}

@keyframes rotation_three_back{
   0%{
      transform: rotate(0deg);
   }
   100%{
      transform: rotate(-360deg);
   }
}

@keyframes rotation_four{
   0%{
      border-color: #fff rgba(255, 255, 225, 0) rgba(255, 255, 225, 0) rgba(255, 255, 225, 0);  
   }
   33%{
      border-color: #fff #fff rgba(255, 255, 225, 0) rgba(255, 255, 225, 0);
   }
   66%{
      border-color: #fff #fff #fff rgba(255, 255, 225, 0);
   }
   100%{
      border-color: #fff #fff #fff #fff;
   }
}