<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="wrap-loading"> <div class="loading loading-1"></div> </div> </div> <div class="row"> <div class="wrap-loading"> <div class="loading loading-2"></div> </div> </div> <div class="row"> <div class="wrap-loading"> <div class="loading loading-3"></div> </div> </div> <div class="row"> <div class="wrap-loading"> <div class="loading loading-4"></div> </div> </div> </div>

@keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-moz-keyframes spin { 0% { -moz-transform: rotate(0deg); transform: rotate(0deg); } 100% { -moz-transform: rotate(360deg); transform: rotate(360deg); } } @-o-keyframes spin { 0% { -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -o-transform: rotate(360deg); transform: rotate(360deg); } } @-ms-keyframes spin { 0% { -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -ms-transform: rotate(360deg); transform: rotate(360deg); } } html, body { height: 100%; } .row { height: 300px; } .wrap-loading { background: #333; width: 100%; height: 100%; position: relative; } .loading { border-radius: 50%; position: absolute; top: 50%; left: 50%; animation: spin 750ms infinite linear; -webkit-animation: spin 750ms infinite linear; -moz-animation: spin 750ms infinite linear; -o-animation: spin 750ms infinite linear; -ms-animation: spin 750ms infinite linear; } .loading-1 { width: 24px; height: 24px; margin-top: -12px; margin-left: -12px; border: 2px solid #ebebeb; border-top-color: #333; } .loading-2 { margin-top: -20px; margin-left: -20px; width: 40px; height: 40px; border: 3px solid #ebebeb; border-top-color: #333; } .loading-3 { margin-top: -25px; margin-left: -25px; width: 50px; height: 50px; border: 3px solid #ebebeb; border-top-color: #333; } .loading-4 { margin-top: -35px; margin-left: -35px; width: 70px; height: 70px; border: 4px solid #ebebeb; border-top-color: #333; }