/* Sourced and modified from https://cssloaders.github.io/ */

.spinner {
    display: block;
    animation: rotate 1s infinite;
    height: 50px;
    width: 50px;
}

.spinner:before,
.spinner:after {
    border-radius: 50%;
    content: "";
    display: block;
    height: 20px;
    width: 20px;
}

.spinner:before {
    animation: ball1 1s infinite;
    background-color: var(--red);
    box-shadow: 30px 0 0 var(--blue);
    margin-bottom: 10px;
}

.spinner:after {
    animation: ball2 1s infinite;
    background-color: var(--blue);
    box-shadow: 30px 0 0 var(--red);
}

@keyframes rotate {
    0% {
        transform: rotate(0deg) scale(0.8)
    }

    50% {
        transform: rotate(360deg) scale(1.2)
    }

    100% {
        transform: rotate(720deg) scale(0.8)
    }
}

@keyframes ball1 {
    0% {
        box-shadow: 30px 0 0 var(--blue);
    }

    50% {
        box-shadow: 0 0 0 var(--blue);
        margin-bottom: 0;
        transform: translate(15px, 15px);
    }

    100% {
        box-shadow: 30px 0 0 var(--blue);
        margin-bottom: 10px;
    }
}

@keyframes ball2 {
    0% {
        box-shadow: 30px 0 0 var(--red);
    }

    50% {
        box-shadow: 0 0 0 var(--red);
        margin-top: -20px;
        transform: translate(15px, 15px);
    }

    100% {
        box-shadow: 30px 0 0 var(--red);
        margin-top: 0;
    }
}