SOURCE

<div class="rotateBox">
  <div class="bor1">
    <div class="bor2">
      <div class="bor3">
        <div class="bor4">
          <div class="ball"></div>
        </div>
      </div>
    </div>
  </div>  
</div>

*{
  margin:0;
  padding:0;
}
html,body{
  width:100%;
  height:100%;
}
.rotateBox{
  padding:50px;
}
.bor1{
  width:100px;
  height:100px;
  border:5px solid rgba(255,100,100,0.2);
  border-radius:100px;
}
.bor2{
  width:90px;
  height:90px;
  border:5px solid rgba(255,100,100,0.4);
  border-radius:100px;
}
.bor3{
  width:80px;
  height:80px;
  border:5px solid rgba(255,100,100,0.6);
  border-radius:100px;
}
.bor4{
  width:70px;
  height:70px;
  border:5px solid rgba(255,100,100,0.8);
  border-radius:100px;
  position:relative;
}
.ball{
  width:5px;
  height:5px;
  background:yellow;
  border-radius:5px;
  position:absolute;
  top:-5px;
  left:50%;
  transform:translateX(-50%) rotate(90deg);
  transform-origin:0 40px;
  animation:ballRotate 2.5s infinite linear;
}
@keyframes ballRotate{
  0%{
    transform:rotate(0);
  }
  100%{
    transform:rotate(360deg);
  }
}