<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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"> <div class="row"> <div class="spin"> <span class="one"></span> <span class="two"></span> <span class="three"></span> </div> </div> </div>

.spin{ height:auto; width:auto; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); } .spin span{ height:56px; width:56px; border:1px solid green; display:block; border-radius:50%; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); animation:spin 1500ms ease-in-out infinite; } .spin .one{ animation-delay:500ms; animation:spin 2000ms ease-in-out infinite; } .spin .two{ animation:spin 1700ms ease-in-out infinite; animation-delay:300ms; border:10px solid teal; } .spin .two{ animation:spin 2000ms ease-in-out infinite; border-color:yellow; } @keyframes spin{ 0%{ transform:scale(0); opacity:1; } 100%{ transform:scale(1.5); opacity:0; } } @keyframes hide{ 0%{ opacity:0; } 10%{ opacity:1; } 100%{ opacity:1; } }