.loader {
  width: 15px;
  aspect-ratio: 1;
  border-radius: 50%;
  animation: l5 1s infinite linear alternate;
}

@keyframes l5 {
    0%  {box-shadow: 20px 0 #000, -20px 0 #0002;background: #000 }
    33% {box-shadow: 20px 0 #000, -20px 0 #0002;background: #0002}
    66% {box-shadow: 20px 0 #0002,-20px 0 #000; background: #0002}
    100%{box-shadow: 20px 0 #0002,-20px 0 #000; background: #000 }
}


.loader-small {
  width: 9px;
  aspect-ratio: 1;
  border-radius: 50%;
  animation: l5small 1s infinite linear alternate;
}

@keyframes l5small {
    0%  {box-shadow: 13px 0 #F00, -13px 0 #F002;background: #F00 }
    33% {box-shadow: 13px 0 #F00, -13px 0 #F002;background: #F002}
    66% {box-shadow: 13px 0 #F002,-13px 0 #F00; background: #F002}
    100%{box-shadow: 13px 0 #F002,-13px 0 #F00; background: #F00 }
}