<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.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="spiners"> <div class="spin1"></div> <div class="spin2"></div> <div class="spin3"></div> </div>

body{ padding: 0; margin: 0; background: #262626; } .spiners{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); height: 200px; width: 200px; } .spin1,.spin2,.spin3{ position: absolute; transform: translate(-50%,-50%); border: 3px solid #eee; border-radius: 100%; border-top: 3px solid #099078; box-shadow: 0px 0px 18px 7px #0084723d } .spin1{ top: 5%; left: 5%; height: 180px; width: 180px; animation: animate 3s linear infinite; } .spin2{ top: 15%; left: 15%; height: 140px; width: 140px; animation: animate 2s linear infinite; } .spin3{ top: 25%; left: 25%; height: 100px; width: 100px; animation: animate 1s linear infinite; } @keyframes animate{ 0%{transform: rotate(0deg);} 100%{transform: rotate(360deg);} }