<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="soft-wave-loader" role="status" aria-label="Loading">
  <i>
  </i>
  <i>
  </i>
  <i>
  </i>
  <i>
  </i>
  <i>
  </i>
</div>

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

.soft-wave-loader{display:flex;align-items:center;gap:7px;width:max-content;height:62px;margin:auto}.soft-wave-loader i{display:block;width:10px;height:22px;border-radius:10px;background:linear-gradient(#90a8ed,#5879d6);box-shadow:0 3px 6px #4664ad2d;animation:soft-wave .95s ease-in-out infinite}.soft-wave-loader i:nth-child(2){animation-delay:.1s;background:linear-gradient(#ad9df0,#7b62d6)}.soft-wave-loader i:nth-child(3){animation-delay:.2s;background:linear-gradient(#f2a4c4,#d56c9a)}.soft-wave-loader i:nth-child(4){animation-delay:.3s;background:linear-gradient(#f4c18b,#e79655)}.soft-wave-loader i:nth-child(5){animation-delay:.4s;background:linear-gradient(#8bd5c1,#54ad98)}@keyframes soft-wave{0%,100%{height:18px;transform:translateY(0)}50%{height:48px;transform:translateY(-3px)}}