<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <ul> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Ashoka_Chakra.svg/1000px-Ashoka_Chakra.svg.png"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <!--100 times <li> copys--> </ul> </div>

body { margin:0; padding:0; background: #232; } ul { position:absolute; top:50%; left:50%; transform: translate(-50%,-50%) rotate(-20deg) skew(20deg); margin:0; padding:0; display: flex; } ul img { width: 100px; height: 100px; position: absolute; top: 50%; left: 50%; z-index: 1; animation: rotate 20s linear infinite; } @keyframes rotate { 0% { transform: translate(-50%,-50%) rotate(0deg) scale(0.8); } 100% { transform: translate(-50%,-50%) rotate(360deg) scale(0.8); } } ul li { position: relative; list-style:none; width: 4px; height: 240px; border-radius: 2px; background:#fff; box-shadow: -1px 0 2px rgba(0,0,0,.2); overflow: hidden; animation: animate 9.5s linear infinite; } ul li:nth-child(20n+1) { animation-delay: -0s; } ul li:nth-child(20n+2) { animation-delay: -0.5s; } ul li:nth-child(20n+3) { animation-delay: -1s; } ul li:nth-child(20n+4) { animation-delay: -1.5s; } ul li:nth-child(20n+5) { animation-delay: -2s; } ul li:nth-child(20n+6) { animation-delay: -2.5s; } ul li:nth-child(20n+7) { animation-delay: -3s; } ul li:nth-child(20n+8) { animation-delay: -3.5s; } ul li:nth-child(20n+9) { animation-delay: -4s; } ul li:nth-child(20n+10) { animation-delay: -4.5s; } ul li:nth-child(20n+11) { animation-delay: -5s; } ul li:nth-child(20n+12) { animation-delay: -5.5s; } ul li:nth-child(20n+13) { animation-delay: -6s; } ul li:nth-child(20n+14) { animation-delay: -6.5s; } ul li:nth-child(20n+15) { animation-delay: -7s; } ul li:nth-child(20n+16) { animation-delay: -7.5s; } ul li:nth-child(20n+17) { animation-delay: -8s; } ul li:nth-child(20n+18) { animation-delay: -8.5s; } ul li:nth-child(20n+19) { animation-delay: -9s; } ul li:nth-child(20n+20) { animation-delay: -9.5s; } ul li:before { content:''; position: absolute; top:0; left:0; width: 100%; height: 80px; background: #ff9933; } ul li:after { content:''; position: absolute; bottom:0; left:0; width: 100%; height: 80px; background: #138808; } @keyframes animate { 0% { transform: translateY(0); } 25% { transform: translateY(5px); } 50% { transform: translateY(0); } 75% { transform: translateY(-5px); } 100% { transform: translateY(0); } }