<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="setTimeout(loader, 3000)"> <!-- If you want not predefined time, replace onlaod by "onload="loader()"" -->
<div id="animation"> <!-- This is a exemple animation and it can be found on Gif website or cssload.net -->
<center><div class="cssload-loader-inner">
<div class="cssload-cssload-loader-line-wrap-wrap">
<div class="cssload-loader-line-wrap"></div>
</div>
<div class="cssload-cssload-loader-line-wrap-wrap">
<div class="cssload-loader-line-wrap"></div>
</div>
<div class="cssload-cssload-loader-line-wrap-wrap">
<div class="cssload-loader-line-wrap"></div>
</div>
<div class="cssload-cssload-loader-line-wrap-wrap">
<div class="cssload-loader-line-wrap"></div>
</div>
<div class="cssload-cssload-loader-line-wrap-wrap">
<div class="cssload-loader-line-wrap"></div>
</div>
</div></center>
</div>
<div id="site-content">
<center><h1>Your web content after animation here !</h1></center>
<center><h3>That can be bugged, but on web site it work ( I tested :D )</h3></center>
</div>
</body>
.cssload-loader-inner { /*This CSS is like a gif but that doesn't lag, found anothers code like them on cssload.net*/
bottom: 0;
height: 58px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: 97px;
}
.cssload-cssload-loader-line-wrap-wrap {
animation: cssload-spin 2300ms cubic-bezier(.175, .885, .32, 1.275) infinite;
-o-animation: cssload-spin 2300ms cubic-bezier(.175, .885, .32, 1.275) infinite;
-ms-animation: cssload-spin 2300ms cubic-bezier(.175, .885, .32, 1.275) infinite;
-webkit-animation: cssload-spin 2300ms cubic-bezier(.175, .885, .32, 1.275) infinite;
-moz-animation: cssload-spin 2300ms cubic-bezier(.175, .885, .32, 1.275) infinite;
box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
height: 49px;
left: 0;
overflow: hidden;
position: absolute;
top: 0;
transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
width: 97px;
}
.cssload-loader-line-wrap {
border: 4px solid transparent;
border-radius: 100%;
-o-border-radius: 100%;
-ms-border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
height: 97px;
left: 0;
margin: 0 auto;
position: absolute;
right: 0;
top: 0;
width: 97px;
}
.cssload-cssload-loader-line-wrap-wrap:nth-child(1) { animation-delay: -57.5ms;
-o-animation-delay: -57.5ms;
-ms-animation-delay: -57.5ms;
-webkit-animation-delay: -57.5ms;
-moz-animation-delay: -57.5ms; }
.cssload-cssload-loader-line-wrap-wrap:nth-child(2) { animation-delay: -115ms;
-o-animation-delay: -115ms;
-ms-animation-delay: -115ms;
-webkit-animation-delay: -115ms;
-moz-animation-delay: -115ms; }
.cssload-cssload-loader-line-wrap-wrap:nth-child(3) { animation-delay: -172.5ms;
-o-animation-delay: -172.5ms;
-ms-animation-delay: -172.5ms;
-webkit-animation-delay: -172.5ms;
-moz-animation-delay: -172.5ms; }
.cssload-cssload-loader-line-wrap-wrap:nth-child(4) { animation-delay: -230ms;
-o-animation-delay: -230ms;
-ms-animation-delay: -230ms;
-webkit-animation-delay: -230ms;
-moz-animation-delay: -230ms; }
.cssload-cssload-loader-line-wrap-wrap:nth-child(5) { animation-delay: -287.5ms;
-o-animation-delay: -287.5ms;
-ms-animation-delay: -287.5ms;
-webkit-animation-delay: -287.5ms;
-moz-animation-delay: -287.5ms; }
.cssload-cssload-loader-line-wrap-wrap:nth-child(1) .cssload-loader-line-wrap {
border-color: rgb(234,71,71);
height: 88px;
width: 88px;
top: 7px;
}
.cssload-cssload-loader-line-wrap-wrap:nth-child(2) .cssload-loader-line-wrap {
border-color: rgb(234,234,71);
height: 74px;
width: 74px;
top: 14px;
}
.cssload-cssload-loader-line-wrap-wrap:nth-child(3) .cssload-loader-line-wrap {
border-color: rgb(71,234,71);
height: 60px;
width: 60px;
top: 20px;
}
.cssload-cssload-loader-line-wrap-wrap:nth-child(4) .cssload-loader-line-wrap {
border-color: rgb(71,234,234);
height: 47px;
width: 47px;
top: 27px;
}
.cssload-cssload-loader-line-wrap-wrap:nth-child(5) .cssload-loader-line-wrap {
border-color: rgb(71,71,234);
height: 33px;
width: 33px;
top: 34px;
}
@keyframes cssload-spin {
0%, 15% {
transform: rotate(0);
transform: rotate(0);
}
100% {
transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-o-keyframes cssload-spin {
0%, 15% {
-o-transform: rotate(0);
transform: rotate(0);
}
100% {
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-ms-keyframes cssload-spin {
0%, 15% {
-ms-transform: rotate(0);
transform: rotate(0);
}
100% {
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes cssload-spin {
0%, 15% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes cssload-spin {
0%, 15% {
-moz-transform: rotate(0);
transform: rotate(0);
}
100% {
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
}
//** By DownWork's lab **
function loader(){ //Change to site content
document.getElementById('animation').style.display='none';
document.getElementById('site-content').style.visibility='visible';
}
