https://codepen.io/guldus/pen/mgKmwd
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>page</title>
<link rel="stylesheet" type="text/css" href="1.page.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="box">
<div id="box_in">
<div class="line a1"><div class="circle a1"></div></div>
<div class="line a2"><div class="circle a2"></div></div>
<div class="line a3"><div class="circle a3"></div></div>
<div class="line a4"><div class="circle a4"></div></div>
<div class="line a5"><div class="circle a5"></div></div>
<div class="line a6"><div class="circle a6"></div></div>
<div class="line a7"><div class="circle a7"></div></div>
<div class="line a8"><div class="circle a8"></div></div>
<div class="line a9"><div class="circle a9"></div></div>
<div class="line a10"><div class="circle a10"></div></div>
<div class="line a11"><div class="circle a11"></div></div>
<div class="line a12"><div class="circle a12"></div></div>
<div class="line a13"><div class="circle a13"></div></div>
<div class="line a14"><div class="circle a14"></div></div>
<div class="line a15"><div class="circle a15"></div></div>
<div class="line a16"><div class="circle a16"></div></div>
<div class="line a17"><div class="circle a17"></div></div>
<div class="line a18"><div class="circle a18"></div></div>
</div>
</div>
</body>
</html>
CSS
body{ background: #262626}
#box{
width: 500px;
height: 500px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: rgba(0,0,0,.1);
border-radius: 50%;
}
#box_in{
position: relative;
}
.line{
position: absolute;
top: 250px;
width: 500px;
height: 1px;
background: rgba(204, 204, 0,.1);
}
.circle{
position: absolute;
top: -10px;
left: 0;
width: 20px;
height: 20px;
background: #e65c00;
animation: ani 3.6s ease-in-out infinite;
border-radius: 50%;
}
.a1{transform: rotate(0deg)}
.a2{transform: rotate(10deg)}
.a3{transform: rotate(20deg)}
.a4{transform: rotate(30deg)}
.a5{transform: rotate(40deg)}
.a6{transform: rotate(50deg)}
.a7{transform: rotate(60deg)}
.a8{transform: rotate(70deg)}
.a9{transform: rotate(80deg)}
.a10{transform: rotate(90deg)}
.a11{transform: rotate(100deg)}
.a12{transform: rotate(110deg)}
.a13{transform: rotate(120deg)}
.a14{transform: rotate(130deg)}
.a15{transform: rotate(140deg)}
.a16{transform: rotate(150deg)}
.a17{transform: rotate(160deg)}
.a18{transform: rotate(170deg)}
.circle.a1{animation-delay: .0s;}
.circle.a2{animation-delay: .1s;}
.circle.a3{animation-delay: .2s;}
.circle.a4{animation-delay: .3s;}
.circle.a5{animation-delay: .4s;}
.circle.a6{animation-delay: .5s;}
.circle.a7{animation-delay: .6s;}
.circle.a8{animation-delay: .7s;}
.circle.a9{animation-delay: .8s;}
.circle.a10{animation-delay: .9s;}
.circle.a11{animation-delay: 1s;}
.circle.a12{animation-delay: 1.1s;}
.circle.a13{animation-delay: 1.2s;}
.circle.a14{animation-delay: 1.3s;}
.circle.a15{animation-delay: 1.4s;}
.circle.a16{animation-delay: 1.5s;}
.circle.a17{animation-delay: 1.6s;}
.circle.a18{animation-delay: 1.7s;}
@keyframes ani{
0%{
left: 0px;
}
50%{
left: 480px;
}
100%{
left: 0px;
}
}
TrueCodes 
Superb Illusion 🙂
LikeLike