<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="loaderBox"> <div class="loadAnim"> <div class="loadeAnim1"></div> <div class="loadeAnim2"></div> <div class="loadeAnim3"></div> </div> </div>

.loaderBox { width: 100%; height: 100%; background: #202020; position: fixed; top: 0; left: 0; } .loadAnim { width: 200px; height: 200px; margin-top: 20%; margin-left: 40%; position: relative; } .loadeAnim1, .loadeAnim2, .loadeAnim3 { position: absolute; border-radius: 100%; border: 10px solid transparent; } .loadeAnim1 { width: 150px; height: 150px; border-top: 10px solid #3498db; border-bottom: 10px solid #3498db; top: 15px; left: 15px; animation: leftToRight 2s linear infinite; } .loadeAnim2 { width: 130px; height: 130px; border: 10px solid red; top: 25px; left: 25px; } .loadeAnim3 { width: 110px; height: 110px; border-right: 10px solid #4000db; border-left: 10px solid #4000db; top: 35px; left: 35px; animation: topToBottom 2s linear infinite; } @keyframes leftToRight { from {transform: rotate(0deg);} to {transform: rotate(360deg);} } @keyframes topToBottom { from {transform: rotate(0deg);} to {transform: rotate(-360deg);} }

$(document).ready(function(){ var Loader = document.getElementById('preloader'); //Here you can change the VAR . window.addEventListener('load', function(){ $(Loader).css({'display': 'none'}) // If you change the VAR on the top then you need to change here too . }) })