<section class="main">
        <ul>
            <li></li>
        </ul>
        <ul>
            <li></li>
        </ul>
        <ul>
            <li></li>
        </ul>
        <ul>
            <li></li>
        </ul>
        <ul>
            <li></li>
        </ul>
        <ul>
            <li></li>
        </ul>
        <ul>
            <li></li>
        </ul>
        <ul>
            <li></li>
        </ul>
        <ul>
            <li></li>
        </ul>
    </section>
// Global Styles

* {
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

// Main Styles

.main {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #161616;

    ul {
        width: 8rem;
        height: 2rem;
        position: absolute;
        list-style: none;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        animation: rotationAni 3s cubic-bezier(.68,.12,0,.99)forwards infinite;
        

        @keyframes rotationAni {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        } 

        li {
            width: .5rem;
            height: .5rem;
            border-radius: 2rem;
            background: slateblue;
        }
    }
}

@for $i from 1 through 9 {
    ul:nth-child(#{$i}) {
       transform: rotate($i*20deg); 
       animation-delay: $i*-.2s;       
    }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.