<style>
    .multi-color-spinner-6 {
        --loader-size: clamp(48px, 12vmin, 96px);
        width: var(--loader-size);
        height: var(--loader-size);
        border-radius: 50%;
        display: inline-block;
        position: relative;
        border: calc(var(--loader-size) * 0.03) solid;
        border-color: {{ playerColor }} {{ playerColor }} transparent transparent;
        box-sizing: border-box;
        animation: rotation 1.5s linear infinite;
        will-change: transform;
        margin: 0 auto;
    }
    .multi-color-spinner-6::after,
    .multi-color-spinner-6::before {
        content: '';  
        box-sizing: border-box;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        border: calc(var(--loader-size) * 0.03) solid;
        border-color: transparent transparent {{ playerColor2 }} {{ playerColor2 }};
        width: calc(var(--loader-size) * 0.82);
        height: calc(var(--loader-size) * 0.82);
        border-radius: 50%;
        animation: rotationBack 1s linear infinite;
        transform-origin: center center;
        will-change: transform;
    }
    .multi-color-spinner-6::before {
        width: calc(var(--loader-size) * 0.64);
        height: calc(var(--loader-size) * 0.64);
        border-color: #fff #fff transparent transparent;
        animation: rotation 2s linear infinite;
    }

    @keyframes rotation {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    } 
    @keyframes rotationBack {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(-360deg);
        }
    }
</style>
<div class="multi-color-spinner-6"></div>