$size: 100%; // Try 100% :D
$count: 40;

body {
  background: #000;
}

.box {
  width: $size;
  height: $size;
  background: #000;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  span {
    background-color: #3498db;
    display: block;
    position: absolute;
    bottom: 0;
    border: 1px solid #000;
    box-sizing: border-box;
    border-radius: 50px 50px 0 0;
    @for $i from 1 through $count {
      &:nth-of-type(#{$i}) {
        width: ($size / $count);
        height: 10%;
        left: (($size / $count) * $i) - ($size / $count)/* + (20px * $i)*/;
        animation: wow 2s $i*.1+s infinite ease-in-out alternate;
        -webkit-filter: hue-rotate(0deg);
      }
    }
  }
}

@keyframes wow {
  to {
    height: 100%;
    -webkit-filter: hue-rotate(360deg);
  }
}