<style>
    .wave-spinner-3 {
        --loader-size: clamp(32px, 8vmin, 64px);
        display: flex;
        justify-content: center;
        align-items: center;
        gap: calc(var(--loader-size) * 0.25);
        height: var(--loader-size);
        width: calc(var(--loader-size) * 2.875);
        margin: 0 auto;
        box-sizing: border-box;
    }

    .wave-spinner-3 div {
        width: calc(var(--loader-size) * 0.375);
        height: 100%;
        background: linear-gradient(to top, {{ playerColor }} 0, {{ playerColor2 }} 100%) !important;
        animation: wave-animation 1.2s infinite;
        will-change: transform;
    }

    .wave-spinner-3 div:nth-child(1) {
        animation-delay: 0s;
    }

    .wave-spinner-3 div:nth-child(2) {
        animation-delay: 0.2s;
    }

    .wave-spinner-3 div:nth-child(3) {
        animation-delay: 0.4s;
    }

    .wave-spinner-3 div:nth-child(4) {
        animation-delay: 0.6s;
    }

    .wave-spinner-3 div:nth-child(5) {
        animation-delay: 0.8s;
    }

    @keyframes wave-animation {
        0%,
        100% {
            transform: scaleY(1);
            -webkit-transform: scaleY(1);
        }
        50% {
            transform: scaleY(2);
            -webkit-transform: scaleY(2);
        }
    }
</style>
<div class="wave-spinner-3">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>