<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="container"> <div class="row"> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> </div> </div>

body { background: #337ab7; } .container { width: 80px; height: 100px; margin: 100px auto; margin-top: calc(100vh / 2 - 50px); } .block { position: relative; box-sizing: border-box; float: left; margin: 0 10px 10px 0; width: 12px; height: 12px; border-radius: 3px; background: #FFF; } .block:nth-child(4n+1) { animation: wave 2s ease .0s infinite; } .block:nth-child(4n+2) { animation: wave 2s ease .2s infinite; } .block:nth-child(4n+3) { animation: wave 2s ease .4s infinite; } .block:nth-child(4n+4) { animation: wave 2s ease .6s infinite; margin-right: 0; } @keyframes wave { 0% { top: 0; opacity: 1; } 50% { top: 19px; opacity: .1; } 100% { top: 0; opacity: 1; } }