-var small = 12;

.container
    -while(small--)
        .small
    .big

// --------------
$c-size: 160px;
$bg-color: #000;
$el-color: #fff;
$time: 1200ms;
// --------------

$small-count: 12;
$trend: (25%, 50%, 75%, 75%, 75%, 75%);
$left: join((50%, 25%, 0, 0, 0, 0), $trend);
$top: join(join((0, 0, 0), $trend), (50%, 25%, 0));

@mixin animation($name) {
    @-webkit-keyframes #{$name} {@content;}
    @-moz-keyframes #{$name} {@content;}
    @-o-keyframes #{$name} {@content;}
    @keyframes #{$name} {@content;}
}

@mixin animation-use($name) {
    -webkit-animation: $name $time infinite linear;
    -moz-animation: $name $time infinite linear;
    -o-animation: $name $time infinite linear;
    animation: $name $time infinite linear;
}

@mixin transform($s, $r) {
    -webkit-transform: scale($s) rotate($r);
    -ms-transform: scale($s) rotate($r);
    transform: scale($s) rotate($r);
}

@include animation(spin) {
    to {
        @include transform(.5, 45deg);
    }
}

body {
    margin: 0;
    overflow: hidden;
    background: $bg-color;
    
    .container {
        position: absolute;
        left: 50%;
        top: 50%;
        width: $c-size;
        height: $c-size;
        margin: -$c-size/2 0 -$c-size/2;
        @include transform(1, -45deg);
        @include animation-use(spin);
        
        & .big {
            position: absolute;
            left: 25%;
            top: 25%;
            width: 50%;
            height: 50%;
            background: $el-color;
            box-shadow: 0 0 0 1px $el-color;
        }
        
        & .small {
            position: absolute;
            width: 25%;
            height: 25%;
            opacity: 0;
            background: $el-color;
            box-shadow: 0 0 0 1px $el-color;
            
            @for $i from 1 through $small-count {
                &:nth-child(#{$i}) {
                    left: nth($left, $i);
                    top: nth($top, $i);
                    @include animation(small + $i) {
                        0%, #{$i*90/$small-count}% {
                            opacity: 0;
                        }
                        95%, 100% {
                            opacity: 1;
                        }
                    }
                    @include animation-use(small + $i);
                }
            }
        }
    }
}