SOURCE

<div class="orbits">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

body,
html {
    height: 100%;
    min-height: 100%;
    background-color: darken( #F70063, 38% );
}

body,
.orbits{
    align-items: center;
    display: flex;
    justify-content: center;
}

.orbits {
    position: relative;
    width: 100%;
    height: 100%;
    div {
        position: absolute;
        border-radius: 50%;
        animation-name: orbit;
        animation-duration: 4s;
        animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
        animation-iteration-count: infinite;
        animation-fill-mode: forwards;
    }
}

$planets:  9;

@for $i from 1 to $planets {
    .orbits div:nth-child(#{$i}) {
        $width: 100px * $i;
        width: $width;
        height: $width;
        top: calc( 50% - (#{$width} / 2) );
        left: calc( 50% - (#{$width} / 2) );
        background: darken( #F70063, $i + $i*3 );
        border: 3px solid darken( #F70063, $i + $i );
        box-shadow: 0 0 33px rgba( darken( #1a1a1a, $i + $i ), 0.3);
        z-index: 10 - $i;
        animation-delay: $i * 100ms;
    }
}

@keyframes orbit {
    from {
        transform: rotate(0deg);
        transform-origin: 0%;
    }
    to {
        transform: rotate(360deg);
        transform-origin: 0% 50%;
    }
}