<div class="dot"></div>

.dot {
  margin:20px auto;
  color:darkblue;
  width:95px;
  height:45px;
  --d:radial-gradient(farthest-side,currentColor 90%,#0000);
  background:var(--d),var(--d),var(--d),var(--d);
  background-size:20px 20px;
  background-repeat:no-repeat;
  animation: m 1s infinite;
}

@keyframes m {
  0%  {background-position:calc(0*100%/3) 50%, calc(1*100%/3) 50% , calc(2*100%/3) 50%, calc(3*100%/3) 50% }
  33% {background-position:calc(0*100%/3) 0  , calc(1*100%/3) 100%, calc(2*100%/3) 0  , calc(3*100%/3) 100%}
  66% {background-position:calc(1*100%/3) 0  , calc(0*100%/3) 100%, calc(3*100%/3) 0  , calc(2*100%/3) 100%}
  100%{background-position:calc(1*100%/3) 50%, calc(0*100%/3) 50% , calc(3*100%/3) 50%, calc(2*100%/3) 50% }
}