Twin Wave Loader

<!--
  Author: @yara_h
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="wave-loader">
  <span></span><span></span><span></span><span></span><span></span><span></span>
</div>

/*
 * Author: @yara_h
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.wave-loader {
  position: relative;
  width: 120px;
  height: 40px;
}
.wave-loader span {
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  animation: wave-move 1.4s ease-in-out infinite;
}
.wave-loader span:nth-child(1) { left: 0px;   background: #38bdf8; animation-delay: 0s; }
.wave-loader span:nth-child(2) { left: 22px;  background: #818cf8; animation-delay: 0.12s; }
.wave-loader span:nth-child(3) { left: 44px;  background: #c084fc; animation-delay: 0.24s; }
.wave-loader span:nth-child(4) { left: 66px;  background: #f472b6; animation-delay: 0.36s; }
.wave-loader span:nth-child(5) { left: 88px;  background: #fb923c; animation-delay: 0.48s; }
.wave-loader span:nth-child(6) { left: 110px; background: #facc15; animation-delay: 0.6s; }
@keyframes wave-move {
  0%, 100% { transform: translateY(-12px); }
  50% { transform: translateY(12px); }
}