<div class="container"> <div class="major"> <div class="minor"></div> </div> </div>
html, body { height: 100%; } .container { width: 100%; height: 100%; background-color: #000; position: relative; } .major { background-color: #f00; width: 100px; height: 100px; border-radius: 50px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; -webkit-animation: rotating 3s linear infinite; } .minor { background-color: #000; width: 96px; height: 96px; border-radius: 50%; position: absolute; top: 0; left: 1px; } .major:nth-child(2) .minor { top: 25px; left: 0; } @-webkit-keyframes rotating { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } }