SOURCE

<div class="ring">
	<div class="dot dot--one"></div>
	<div class="dot dot--two"></div>
	<div class="dot dot--three"></div>
	<div class="dot dot--four"></div>
</div>

body {
    background: #252525;
}

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

@keyframes rotateCounterClockwise {
    100% {
        transform: rotate(-360deg);
    }
}

.ring {
    position: relative;
    left: 50%;
    top: 50px;
    margin-left: -100px;
    height: 200px;
    width: 200px;
    border: 10px solid #666;
    border-radius: 50%;
}

.dot {
    position: absolute;
    height: 250px;
    width: 40px;
    top: -25px;
    left: 50%;
    margin-left: -20px;
}

.dot::before {
    display: block;
    content: '';
    height: 40px;
    width: 40px;
    border-radius: 50%;
    box-shadow: 0 2px 3px rgba(0, 0, 0, .1);
}

.dot--one {
    animation: rotateClockwise 4s linear infinite;
}

.dot--one::before {
    background: #e6a933;
}

.dot--two {
    animation: rotateCounterClockwise 2s linear infinite;
}

.dot--two::before {
    background: #e63348;
}

.dot--three {
    animation: rotateClockwise 7s linear infinite;
}

.dot--three::before {
    background: #70b942;
}

.dot--four {
    animation: rotateCounterClockwise 12s linear infinite;
}

.dot--four::before {
    background: #009ee3;
}