<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container1"> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> </div>

body{ background:blueviolet; } .container1{ position:absolute; left:50%; top:50%; } .circle{ width:10px; height:1000px; background:#fff; border-radius:%; border:3px #fff solid; position:absolute; animation: anim 0.2s linear infinite; } .circle:nth-child(2){ animation-delay: 1s; } .circle:nth-child(3){ animation-delay: 1.3s; } .circle:nth-child(4){ animation-delay: 1.6; } .circle:nth-child(5){ animation-delay: 1.9s; } .circle:nth-child(6){ animation-delay: 2.2s; } .circle:nth-child(7){ animation-delay: 2.5s; } .circle:nth-child(8){ animation-delay: 2.8s; } @keyframes anim{ 0%{ transform-origin:400% 50%; transform: rotate(0); opacity:0.1; } 50%{ transform-origin:400% 50%; transform: rotate(360deg); opacity:0.5; } 50.1%{ transform-origin: -300% 50%; transform: rotate(0deg); opacity:1; } 100%{ transform-origin: -300% 50%; transform: rotate(-360deg); opacity:1; opacity:0.5; } }