.zx-load-animation.positive-delay
  - (1..20).each do |i|
    %div
.zx-load-animation.negative-delay
  - (1..20).each do |i|
    %div
View Compiled
@import "compass/css3";

$zx-animation-duration: .8s;
$zx-number-of-bars-per-wave: 20;

@keyframes sweep {
    0% { transform: scaleY(.1); }
  100% { transform: scaleY(1); }
}

.zx-load-animation {
  font-size: 0;
  
  > div {
    background: #6ea032;
    display: inline-block;
    height: 50px;
    width: 10px;

    transform-origin: 0 100%;
    animation: sweep $zx-animation-duration cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite both alternate;
  }
}

.positive-delay > div {
  @for $i from 1 through $zx-number-of-bars-per-wave {
    &:nth-child(#{$zx-number-of-bars-per-wave}n+#{$i}) {
      animation-delay: $i * $zx-animation-duration / $zx-number-of-bars-per-wave * 2;
    }
  }
}

.negative-delay > div {
  @for $i from 1 through $zx-number-of-bars-per-wave {
    &:nth-child(#{$zx-number-of-bars-per-wave}n+#{$zx-number-of-bars-per-wave + 1 - $i}) {
      animation-delay: $i * $zx-animation-duration * -1 / $zx-number-of-bars-per-wave * 2;
    }
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.