.sxs-spinner {
    width: 80px;
    height: 80px;
    max-height: 80px;
    max-width: 80px;
    animation: 1800ms linear infinite _spin-ku31;

    circle {
        display: block;
        fill: transparent;
        stroke: $primaryClear;
        stroke-linecap: square;
        stroke-dasharray: 280;
        stroke-dashoffset: 250;
        stroke-width: 10px;
        transform-origin: 50% 50%;
        animation: 4000ms ease infinite both _spin-stroke-nk3b;
    }

    @keyframes _spin-ku31 {
        0% {
            transform: rotateZ(0deg);
        }

        100% {
            transform: rotateZ(360deg)
        }
    }

    @keyframes _spin-stroke-nk3b {

        0%,
        25% {
            stroke-dashoffset: 250;
            transform: rotate(0);
        }

        50%,
        75% {
            stroke-dashoffset: 90;
            transform: rotate(45deg);
        }

        100% {
            stroke-dashoffset: 250;
            transform: rotate(360deg);
        }
    }
}