<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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="ring"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div>

body{ background: #262626; display: flex; align-items: center; justify-content: center; } .ring{ position: relative; width: 300px; height: 300px; transform-style: preserve-3d; transform: perspective(500px) rotatex(60deg); } span{ position: absolute; display: block; border: 5px solid #fff; border-radius: 50%; box-shadow: 0 5px 0 #ccc, inset 0 5px 0 #ccc; box-sizing: border-box; animation: topdown 3s ease-in-out infinite; } @keyframes topdown{ 0%{ transform: translateZ(-100px); } 50%{ transform: translateZ(100px); } 100%{ transform: translateZ(-100px); } } span:nth-child(1) { top: 0px; right: 0px; bottom: 0px; left: 0px; animation-delay: 1.4s; } span:nth-child(2) { top: 10px; right: 10px; bottom: 10px; left: 10px; animation-delay: 1.3s; } span:nth-child(3) { top: 20px; right: 20px; bottom: 20px; left: 20px; animation-delay: 1.2s; } span:nth-child(4) { top: 30px; right: 30px; bottom: 30px; left: 30px; animation-delay: 1.1s; } span:nth-child(5) { top: 40px; right: 40px; bottom: 40px; left: 40px; animation-delay: 1s; } span:nth-child(6) { top: 50px; right: 50px; bottom: 50px; left: 50px; animation-delay: 0.9s; } span:nth-child(7) { top: 60px; right: 60px; bottom: 60px; left: 60px; animation-delay: 0.8s; } span:nth-child(8) { top: 70px; right: 70px; bottom: 70px; left: 70px; animation-delay: 0.7s; } span:nth-child(9) { top: 80px; right: 80px; bottom: 80px; left: 80px; animation-delay: 0.6s; } span:nth-child(10) { top: 90px; right: 90px; bottom: 90px; left: 90px; animation-delay: 0.5s; } span:nth-child(11) { top: 100px; right: 100px; bottom: 100px; left: 100px; animation-delay: 0.4s; } span:nth-child(12) { top: 110px; right: 110px; bottom: 110px; left: 110px; animation-delay: 0.3s; } span:nth-child(13) { top: 120px; right: 120px; bottom: 120px; left: 120px; animation-delay: 0.2s; } span:nth-child(14) { top: 130px; right: 130px; bottom: 130px; left: 130px; animation-delay: 0.1s; } span:nth-child(15) { top: 140px; right: 140px; bottom: 140px; left: 140px; animation-delay: 0s; }