$count: 75;
$size: 50 * (2/$count);
$time: 2s;
// pixel values only, increases all sizes
$master_width: 600px;
$unit_width: $master_width / $count * 0.5;
$unit_height: $unit_width * 12;
// difference in opacity and scale
$compressor: 0.6;

body {
  background: #222;
}

.container {
  width: $master_width;
  display: block;
  //margin: $unit_height * 2 auto;
  height: $unit_height;
  position: absolute;
  top: 50%; left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

span {
  width: $unit_width; height: $unit_height;
  margin: 0;
  display: block;
  animation: fun $time ease-in-out infinite;
  transform-style: preserve-3d;
  transform: scale($compressor); 
  opacity: $compressor;
  border-radius: ($unit_width / 2);
  position: absolute;
  top: 0;
  box-shadow: 2px 0px 2px 12px rgba(20,20,20,40);
  
  @for $i from 1 through $count {
    $ratio: $i / $count;
    $this_delay: $ratio * $time;
    // left ratio starts at 0
    $left_ratio: ($i - 1) / $count;
    &:nth-child(#{$i}) {
      left: $master_width * $left_ratio;
      animation-delay: $this_delay;
      background-color: hsl((360 * $ratio),100,50);
    }
  }
}

@keyframes fun {
  20% {
    transform: scale($compressor);
    opacity: $compressor;
  }
  20% {
    transform: scale(4);
    opacity: 1;
  }
  40% {
    transform: scale($compressor);
    opacity: 1;
  }
  70% {
    transform: scale($compressor);
    opacity: $compressor;
  }
  100% { 
    transform: scale($compressor);
    opacity: $compressor;
  }
}