<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">
<img width="100%" src='https://unsplash.it/3000/3000/?random' />
</div>
</div>
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
body {
overflow: hidden;
position: relative;
}
/* Preloader */
#preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #f5f5f5;
/* change if the mask should have another color then white */
z-index: 99;
/* makes sure it stays on top */
}
#status {
position: absolute;
left: 50%;
/* centers the loading animation horizontally one the screen */
top: 50%;
/* centers the loading animation vertically one the screen */
/* is width and height divided by two */
}
.spinner-sm {
width: 50px;
height: 50px;
background-image: url(http://www.lumavi.de/templates/automobile_darmas/images/icon_darmas_white.png);
background-size: 40%;
background-position: center center;
background-repeat: no-repeat;
background-color: #214577;
border-radius: 50%;
}
.spinner-sm:after,
.spinner-sm:before {
content: '';
display: block;
width: 50px;
height: 50px;
border-radius: 50%;
}
.spinner-sm-1:after {
position: absolute;
top: -4px;
left: -4px;
border: 4px solid transparent;
border-top-color: #214577;
border-bottom-color: #214577;
animation: spinny 0.8s linear infinite;
}
@keyframes spinny {
0% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(90deg) scale(1.2);
}
100% {
transform: rotate(360deg) scale(1);
}
}
@keyframes spinny {
0% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(90deg) scale(1.2);
}
100% {
transform: rotate(360deg) scale(1);
}
}
$( "body" ).prepend( '<div id="preloader"><div class="spinner-sm spinner-sm-1" id="status"> </div></div>' );
$(window).on('load', function() { // makes sure the whole site is loaded
$('#status').fadeOut(); // will first fade out the loading animation
$('#preloader').delay(350).fadeOut('slow'); // will fade out the white DIV that covers the website.
$('body').delay(350).css({'overflow':'visible'});
})
