"Css loader"
Bootstrap 3.3.0 Snippet by mclord

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
#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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
var myVar;
function myFunction() {
myVar = setTimeout(showPage, 1000);
}
function showPage() {
document.getElementById("loading").style.display = "none";
document.getElementById("myDiv").style.display = "block";
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Coming Sssoon Page
Boll css loader

Questions / Comments: