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

.loader{
   display: inline-block;
   position: relative;
   width: 96px;
   height: 96px;
   border: 3px solid;
   border-color: #fff #fff transparent transparent;
   border-radius: 50%;
   animation: rotation 1s linear infinite;
}
.loader::after,
.loader::before{
   content: '';
   position: absolute;
   margin: auto;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   width: 80px;
   height: 80px;
   border-radius: 50%;
   border: 3px solid;
   border-color: transparent transparent #e74c3c #e74c3c;
   transform-origin: center center;
   animation: rotationBack 0.5s linear infinite;
}
.loader::before{
   width: 64px;
   height: 64px;
   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);
   }
}