"Css loader"
Bootstrap 3.3.0 Snippet by mclord

<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 ----------> <body onload="myFunction()" style="margin:0;"> <div id="overlay"> <div id="loading"></div> </div> <div style="display:none;" id="myDiv" class="animate-bottom"> <h1>A new page</h1> </div>
#loading { width:100px; height:100px; border:2px solid #ccc; border-top-color:#f50; border-radius:100%; /* here we center it*/ position:fixed; top:0; right:0; left:0; bottom:0; margin:auto; /* Tha animation*/ animation: round 1s linear infinite; } @keyframes round { from{transform: rotate(0deg)} to{transform: rotate(360deg)} } #overlay { height:100%; width:100%; background:#000; opacity:1; left:0; top:0; z-index:9999; }
var myVar; function myFunction() { myVar = setTimeout(showPage, 1000); } function showPage() { document.getElementById("loading").style.display = "none"; document.getElementById("myDiv").style.display = "block"; }

Related: See More


Questions / Comments: