<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="container"> <div class="row"> <li class="three-bounce selected"> <div class="one"></div> <div class="two"></div> <div class="three"></div> </li> </div> </div>

/*//////////////////////////////////////////// Animate.css Bounce ////////////////////////////////////////////*/ body{ background-color:#000; padding:50px; } .three-bounce{ list-style-type:none; margin:0 auto; } .three-bounce>div{ display:inline-block; width:18px; height:18px; border-radius:100%; background-color:#fff; -webkit-animation:bouncedelay 1.4s infinite ease-in-out both; animation:bouncedelay 1.4s infinite ease-in-out both } .three-bounce .one{ -webkit-animation-delay:-0.32s; animation-delay:-0.32s } .three-bounce .two{ -webkit-animation-delay:-0.16s; animation-delay:-0.16s } @-webkit-keyframes bouncedelay{ 0%, 80%, 100%{ -webkit-transform:scale(0) } 40%{ -webkit-transform:scale(1) } } @keyframes bouncedelay{ 0%, 80%, 100%{ -webkit-transform:scale(0); transform:scale(0) } 40%{ transform:scale(1); -webkit-transform:scale(1) } }