body {
  background-color: #EEE;
  line-height: 100vh;
  text-align: center;
}

#container {
  display: inline-block;
  width: 180px;
  height: 30px;
}

.dots {
  float: left;
  width: 18px;
  height: 30px;
  
  position: relative;
  
  &:before, &:after {
    content: "";
    display: block;
    border-radius: 50px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
  
  &:before {
    height: 4px;
    width: 4px;
    background-color: #555;
    z-index: -1;
  }
  
  &:after {
    height: 9px;
    width: 9px;
    background-color: #F00;
    z-index: 1;
  }
  
  @for $i from 0 through 9 {
    &:nth-child(#{$i+1}) {
      &:before {
        -webkit-animation: waveBefore 0.9s #{$i*0.09}s linear infinite;
      }

      &:after {
        -webkit-animation: waveAfter 0.9s #{$i*0.09}s linear infinite;
      }
    }
  }
}

@-webkit-keyframes waveBefore {
  0% {
    height: 4px;
    width: 4px;
    top: 50%;
    z-index: -1;
  }
  10% {
    height: 5px;
    width: 5px;
    z-index: -1;
  }
  20% {
    height: 6px;
    width: 6px;
    top: 100%;
    z-index: 1;
  }
  30% {
    height: 7px;
    width: 7px;
    z-index: 1;
  }
  40% {
    height: 8px;
    width: 8px;
    z-index: 1;
  }
  50% {
    height: 9px;
    width: 9px;
    z-index: 1;
  }
  60% {
    height: 8px;
    width: 8px;
    z-index: 1;
  }
  70% {
    height: 7px;
    width: 7px;
    z-index: 1;
  }
  80% { 
    height: 6px;
    width: 6px;
    top: 0;
    z-index: -1;
  }
  90% { 
    height: 5px;
    width: 5px;
    z-index: -1;
  }
  100% {
    height: 4px;
    width: 4px;
    top: 50%;
    z-index: -1;
  }
}

@-webkit-keyframes waveAfter {
  0% {
    height: 9px;
    width: 9px;
    top: 50%;
    z-index: 1;
  }
  10% {
    height: 8px;
    width: 8px;
    z-index: 1;
  }
  20% {
    height: 7px;
    width: 7px;
    top: 0;
    z-index: -1;
  }
  30% {
    height: 6px;
    width: 6px;
    z-index: -1;
  }
  40% {
    height: 5px;
    width: 5px;
    z-index: -1;
  }
  50% {
    height: 4px;
    width: 4px;
    z-index: -1;
  }
  60% {
    height: 5px;
    width: 5px;
    z-index: -1;
  }
  70% {
    height: 6px;
    width: 6px;
    z-index: -1;
  }
  80% { 
    height: 7px;
    width: 7px;
    top: 100%;
    z-index: 1;
  }
  90% { 
    height: 8px;
    width: 8px;
    z-index: 1;
  }
  100% {
    height: 9px;
    width: 9px;
    top: 50%;
    z-index: 1;
  }
}