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