.spinner {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 100%;
    animation: spinner 5s infinite linear;
}

.spinner-circle {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-origin: 48% 48%;
}

.spinner-inner {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    border: 5px solid transparentize($color-primary-dark, 0.3);
    border-right: none;
    border-top: none;
    background-clip: padding-box;
    box-shadow: inset 0 0 10px transparentize($color-primary-dark, 0.85);
}

@keyframes spinner {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.spinner-circle:nth-of-type(0) {
    transform: rotate(0deg);
}

.spinner-circle:nth-of-type(0) .spinner-inner {
    animation: spinner 2s infinite linear;
}

.spinner-circle:nth-of-type(1) {
    transform: rotate(70deg);
}

.spinner-circle:nth-of-type(1) .spinner-inner {
    animation: spinner 2s infinite linear;
}

.spinner-circle:nth-of-type(2) {
    transform: rotate(140deg);
}

.spinner-circle:nth-of-type(2) .spinner-inner {
    animation: spinner 2s infinite linear;
}
