.container
    - for(var i=0; i<3; i++)
        .box 
View Compiled
$count : 3;
$bgcolorlist: #0801fb #1ffe27 #fd1a20;

body {
    background-color: #291f34;
}

.container {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transform-origin: 48% 48%;
    mix-blend-mode: screen;
}

@for $i from 1 through $count {
    .box:nth-child(#{$i}) { 
        background-color: nth($bgcolorlist, $i);
        animation: turn 3s linear #{1-$i}s infinite;
    }
}


@keyframes turn {
    to {
        transform: rotate(360deg);
    }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.