/*Centers the spinner in the middle of the nearest relative container*/
svg.connect-spinner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: 2s linear infinite spinner-rotate;
    max-width: 100px;
    width: 70px;
    z-index: 1000;
}

@keyframes spinner-rotate {
    0% {
        transform: translate(-50%, -50%) rotateZ(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotateZ(360deg)
    }
}

svg.connect-spinner circle {
    animation: 1.4s ease-in-out infinite both spinner-circle-animation;
    display: block;
    fill: transparent;
    stroke: #58C927;
    stroke-linecap: round;
    stroke-dasharray: 283;
    stroke-dashoffset: 280;
    stroke-width: 10px;
    transform-origin: 50% 50%;
}

@keyframes spinner-circle-animation {
    0%, 25% {
        stroke-dashoffset: 280;
        transform: rotate(0);
    }

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

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