Circel Rounding Animation

 Circel Rounding Animation

<div class="main">

  <div class="circle"></div>

</div>

--------------------------------------------

body{

  background:black;

}

.main{

  width:330px;

  height:330px;

  border:1px solid #CCC;

  position:absolute;

  top:0; bottom:0; left:0;right:0;

  margin:auto;

  border-radius:50%; 

  border:10px solid white;

}

.circle{

  width:10px;

  height:10px;

  background:cyan;

  border-radius:50%;

  position:absolute;

  top:0; bottom:0; left:0;right:0;

  overflow:hidden;

  margin:auto;

  animation: circle 2s linear infinite;

}

@keyframes circle{

  0%{

    transform:rotate(0deg)

              translate(-165px)

              rotate(0deg);

  

  }

  100%{

    transform:rotate(360deg)

              translate(-165px)

              rotate(-360deg);

  }

}