<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="container"> <div class="row"> <div class="col-md-12"> <div class="loader"> <div class="loader-inner-1"></div> <div class="loader-inner-2"></div> <div class="loader-inner-3"></div> <div class="loader-inner-4"></div> <div class="loader-inner-5"></div> <div class="loader-inner-6"></div> <div class="loader-inner-7"></div> <div class="loader-inner-8"></div> <div class="loader-inner-9"></div> <div class="loader-inner-10"></div> </div> </div> </div> </div>

.loader{ width: 100px; height: 100px; position: relative; margin: 40px auto; } .loader > div{ background: transparent; border: 4px solid transparent; border-color: transparent transparent transparent #152861; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate"("-50%, -50%")"; -moz-transform: translate"("-50%, -50%")"; -ms-transform: translate"("-50%, -50%")"; -o-transform: translate"("-50%, -50%")"; transform: translate"("-50%, -50%")"; -webkit-transform: translate(-50%, -50%) rotate(0); -moz-transform: translate(-50%, -50%) rotate(0); -ms-transform: translate(-50%, -50%) rotate(0); -o-transform: translate(-50%, -50%) rotate(0); transform: translate(-50%, -50%) rotate(0); -webkit-animation: loading 2s infinite ease-in-out; -moz-animation: loading 2s infinite ease-in-out; -o-animation: loading 2s infinite ease-in-out; animation: loading 2s infinite ease-in-out; } .loader .loader-inner-1{ width: 20px; height: 20px; -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; -o-animation-delay: 0.1s; animation-delay: 0.1s; } .loader .loader-inner-2{ width: 25px; height: 25px; -webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; -o-animation-delay: 0.2s; animation-delay: 0.2s; } .loader .loader-inner-3{ width: 30px; height: 30px; -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; -o-animation-delay: 0.3s; animation-delay: 0.3s; } .loader .loader-inner-4{ width: 35px; height: 35px; -webkit-animation-delay: 0.4s; -moz-animation-delay: 0.4s; -o-animation-delay: 0.4s; animation-delay: 0.4s; } .loader .loader-inner-5{ width: 40px; height: 40px; -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; -o-animation-delay: 0.5s; animation-delay: 0.5s; } .loader .loader-inner-6{ width: 45px; height: 45px; -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; -o-animation-delay: 0.6s; animation-delay: 0.6s; } .loader .loader-inner-7{ width: 50px; height: 50px; -webkit-animation-delay: 0.7s; -moz-animation-delay: 0.7s; -o-animation-delay: 0.7s; animation-delay: 0.7s; } .loader .loader-inner-8{ width: 55px; height: 55px; -webkit-animation-delay: 0.8s; -moz-animation-delay: 0.8s; -o-animation-delay: 0.8s; animation-delay: 0.8s; } .loader .loader-inner-9{ width: 60px; height: 60px; -webkit-animation-delay: 0.9s; -moz-animation-delay: 0.9s; -o-animation-delay: 0.9s; animation-delay: 0.9s; } .loader .loader-inner-10{ width: 65px; height: 65px; -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -o-animation-delay: 1s; animation-delay: 1s; } @-webkit-keyframes loading{ 50% { -webkit-transform: translate(-50%, -50%) rotate(360deg); -moz-transform: translate(-50%, -50%) rotate(360deg); -ms-transform: translate(-50%, -50%) rotate(360deg); -o-transform: translate(-50%, -50%) rotate(360deg); transform: translate(-50%, -50%) rotate(360deg); border-color: transparent transparent #FFFA6B #DD480C; } 75% { border-color: #FFFA6B transparent transparent #DD480C; } } @-moz-keyframes loading{ 50% { -webkit-transform: translate(-50%, -50%) rotate(360deg); -moz-transform: translate(-50%, -50%) rotate(360deg); -ms-transform: translate(-50%, -50%) rotate(360deg); -o-transform: translate(-50%, -50%) rotate(360deg); transform: translate(-50%, -50%) rotate(360deg); border-color: transparent transparent #FFFA6B #DD480C; } 75% { border-color: #FFFA6B transparent transparent #DD480C; } } @-o-keyframes loading{ 50% { -webkit-transform: translate(-50%, -50%) rotate(360deg); -moz-transform: translate(-50%, -50%) rotate(360deg); -ms-transform: translate(-50%, -50%) rotate(360deg); -o-transform: translate(-50%, -50%) rotate(360deg); transform: translate(-50%, -50%) rotate(360deg); border-color: transparent transparent #FFFA6B #DD480C; } 75% { border-color: #FFFA6B transparent transparent #DD480C; } } @keyframes loading{ 50% { -webkit-transform: translate(-50%, -50%) rotate(360deg); -moz-transform: translate(-50%, -50%) rotate(360deg); -ms-transform: translate(-50%, -50%) rotate(360deg); -o-transform: translate(-50%, -50%) rotate(360deg); transform: translate(-50%, -50%) rotate(360deg); border-color: transparent transparent #FFFA6B #DD480C; } 75% { border-color:#FFFA6B transparent transparent #DD480C; } }