.loader{
  display: flex;
  align-items: center;
  margin-top: 2rem;
  margin-right: .5rem;
}
/* Dots */
.loader span{
  height: 1rem;
  width: 1rem;
  border-radius: 50%;
  transform-origin: 25% 50%;
}
.loader div{
  background-color: rgb(233, 130, 52);
  width: .5rem;
  height: .5rem;
  margin: .25rem .5rem;
  border-radius: 50%;
}

.loader section{
  background-color: #87ceeb;
  width: .5rem;
  height: .5rem;
  margin: .25rem .5rem;
  border-radius: 50%;
}

@keyframes loading-first {
  0%{
    transform: translateX(0);
  }
  5%{
    transform: translateX(0);
  }
  45%{
    transform: translateX(4rem);
  }
  55%{
    transform: translateX(4rem);
  }
  95%{
    transform: translateX(0);
  }
  100%{
    transform: translateX(0);
  }
}
@keyframes loading-second {
  0%{
    transform: rotate(0deg);
  }
  5%{
    transform: rotate(0deg);
  }
  15%{
    transform: rotate(-180deg);
  }
  85%{
    transform: rotate(-180deg);
  }
  95%{
    transform: rotate(-360deg);
  }
  100%{
    transform: rotate(-360deg);
  }
}
@keyframes loading-third {
  0%{
    transform: rotate(0deg);
  }
  15%{
    transform: rotate(0deg);
  }
  25%{
    transform: rotate(-180deg);
  }
  75%{
    transform: rotate(-180deg);
  }
  85%{
    transform: rotate(-360deg);
  }
  100%{
    transform: rotate(-360deg);
  }
}

@keyframes loading-fourth {
  0%{
    transform: rotate(0deg);
  }
  25%{
    transform: rotate(0deg);
  }
  35%{
    transform: rotate(-180deg);
  }
  65%{
    transform: rotate(-180deg);
  }
  75%{
    transform: rotate(-360deg);
  }
  100%{
    transform: rotate(-360deg);
  }
}

@keyframes loading-fifth {
  0%{
    transform: rotate(0deg);
  }
  35%{
    transform: rotate(0deg);
  }
  45%{
    transform: rotate(-180deg);
  }
  55%{
    transform: rotate(-180deg);
  }
  65%{
    transform: rotate(-360deg);
  }
  100%{
    transform: rotate(-360deg);
  }
}

 
.loader span:nth-child(1){
 animation: loading-first 5s linear infinite;
}
.loader span:nth-child(2){
 animation: loading-second 5s linear infinite;
}
.loader span:nth-child(3){
 animation: loading-third 5s linear infinite;
}
.loader span:nth-child(4){
 animation: loading-fourth 5s linear infinite;
}
.loader span:nth-child(5){
 animation: loading-fifth 5s linear infinite;
}