*{
   box-sizing: border-box;
}
body{
   margin: 0;
   padding: 0;
   min-height: 100vh;
   height: auto;
   background: #0c0c2c;
   display: flex;
   align-items: center;
   justify-content: center;
}

.loader{
   display: inline-block;
   position: relative;
   width: 48px;
   height: 48px;
   border-radius: 50%;
   border: 0.3rem solid;
   border-color: #fff #fff transparent transparent;
   animation: rotation 1s linear infinite;
}
.loader::after,
.loader::before{
   content: '';
   position: absolute;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
   margin: auto;
   box-sizing: border-box;
   border: 0.3rem solid;
   border-color: transparent transparent #FF3D00 #FF3D00;
   border-radius: 50%;
   width: 40px;
   height: 40px;
   transform-origin: center center;
   animation: rotationBack 0.5s linear infinite;
}
.loader::before{
   width: 32px;
   height: 32px;
   border-color: #09e #09e transparent transparent;
   animation: rotation 1.5s linear infinite;
}

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

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