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

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

.spinner {
    position: relative;
    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-blue, 8%);
            width: 15%;
            height: 15%;
            content: "";
            -webkit-animation: circleFadeDelay 1.2s infinite ease-in-out both;
        }
    }

    @for $i from 1 through 12 {
        $rotation: 30deg * ($i - 1);
        $delay: -1.3s + $i * .1;
        .circle#{$i} {
            transform: rotate($rotation);
            -ms-transform: rotate($rotation);
            -webkit-transform: rotate($rotation);
        }
        .circle#{$i}:before {
            animation-delay: $delay; 
            -webkit-animation-delay: $delay;
        }
    }

}

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