/*  Wave

      <div class="sk-wave">
        <div class="sk-wave-rect"></div>
        <div class="sk-wave-rect"></div>
        <div class="sk-wave-rect"></div>
        <div class="sk-wave-rect"></div>
        <div class="sk-wave-rect"></div>
      </div>
 */
.ajax-throbber.sk-wave {
  width: var(--sk-size);
  height: var(--sk-size);
  display: flex;
  justify-content: space-between;
}

.ajax-throbber .sk-wave-rect {
  background-color: var(--sk-color);
  height: 100%;
  width: 15%;
  animation: sk-wave 1.2s infinite ease-in-out;
}

.ajax-throbber .sk-wave-rect:nth-child(1) { animation-delay: -1.2s; }
.ajax-throbber .sk-wave-rect:nth-child(2) { animation-delay: -1.1s; }
.ajax-throbber .sk-wave-rect:nth-child(3) { animation-delay: -1.0s; }
.ajax-throbber .sk-wave-rect:nth-child(4) { animation-delay: -0.9s; }
.ajax-throbber .sk-wave-rect:nth-child(5) { animation-delay: -0.8s; }

@keyframes sk-wave {
  0%, 40%, 100% {
    transform: scaleY(0.4);
  } 20% {
      transform: scaleY(1);
    }
}