<div class="circles" id="circles">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>

</div>
$spin-time: 2s;
$circle-color: #ffaa00;
$circle-size: 55vmin;
$displacement: .3%;

.circles {
    height: $circle-size;
    width: $circle-size;
    position: absolute;
    margin: 0 auto;
    top: 50%;
    left: 50%;
    transform: translate3D(-50%, -50%, 0);
}

.circle {
    box-sizing: border-box;
    position: absolute;
    width: 100%;
    height: 100%;
    // border: $circle-stroke solid transparent;
    border-radius: 121% 128% 125% 124%/125% 120% 127% 125%;
    &:nth-child(1) {
        transform-origin: 50%-$displacement 50%;
        animation: spin1 $spin-time linear infinite;
        background: $circle-color;
    }
    &:nth-child(2) {
        transform-origin: 50% 50%+$displacement;
        animation: spin2 $spin-time linear infinite;
        background: $circle-color;
    }
    &:nth-child(3) {
        transform-origin: 50%+$displacement 50%;
        animation: spin3 $spin-time linear infinite;
        background: $circle-color;
    }
}

@keyframes spin1 {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes spin2 {
    0% {
        transform: rotate(-144deg);
    }
    100% {
        transform: rotate(216deg);
    }
}

@keyframes spin3 {
    0% {
        transform: rotate(216deg);
    }
    100% {
        transform: rotate(-144deg);
    }
}

body,
html {
    background-color: black;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.