scratch-www/src/components/spinner/spinner.scss

@import "../../colors";

.spinner {
    position: relative;
    margin: 0 auto;
    width: 20px;
    height: 20px;

    .circle {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;

        &:before {
            display: block;
            animation: circleFadeDelay 1.2s infinite ease-in-out both;
            margin: 0 auto;
            border-radius: 100%;
            background-color: darken($ui-white, 8%);
            width: 15%;
            height: 15%;
            content: "";

            .white & {
                background-color: darken($ui-blue, 8%);
            }
        }
    }

    @for $i from 1 through 12 {
        $rotation: 30deg * ($i - 1);
        $delay: -1.3s + $i * .1;

        .circle#{$i} {
            transform: rotate($rotation);

            &:before {
                animation-delay: $delay;
            }
        }

    }

}

@keyframes circleFadeDelay {
    0%,
    39%,
    100% {
        opacity: 0;
    }

    40% {
        opacity: 1;
    }
}