//1.Code for preloader
$.fn.liftOff = function(){
var div=$(".preloader");
$.when(
$(".logo-container").animate({bottom: '35%'}).promise()
).done(function(){
$(".loader-container").animate({bottom: '15%'}).promise;
});
div.delay(3000).animate({bottom:'100%'}, 400);
};
$(document).ready(function(){
$('body').liftOff();
});
//2.HTML markup
/*
<div class="preloader">
<div class="logo-container">
<img src="images/logo.png" alt="" />
</div>
<div class="loader-container">
<span class="loader">
<span class="loader-inner">
</span>
</span>
</div>
</div>
*/
//3.CSS for preloader
/*
.preloader{
background-color: #11B6EC;
height:100%;
width:100%;
position:fixed;
bottom:0;
box-shadow: inset 0 0 100px rgba(0,0,0,.5);
}
.logo-container, .loader-container {
position: absolute;
bottom: -1000px;
left: 40%;
}
.logo-container {
width: 20%;
margin: 0 auto;
}
.logo-container img{
width: 100%;
}
@media(max-width: 400px){
.logo-container{
width: 70%;
left:15%;
}
}
.loader-container{
width: 20%;
margin: 0 auto;
text-align: center;
}
.loader {
display: inline-block;
width: 40px;
height: 40px;
position: relative;
border: 4px double #fff;
border-radius: 10%;
}
.loader-inner {
position: absolute;
bottom: 0;
right:0;
display: inline-block;
width: 100%;
background-color: #fff;
-webkit-animation: loader-inner 8s infinite ease-in;
-moz-animation: loader-inner 8s infinite ease-in;
animation: loader-inner 8s infinite ease-in;
}
@-webkit-keyframes loader-inner{
0% {
height: 0%;
}
25% {
height: 0%;
}
50% {
height: 100%;
}
75% {
height: 100%;
}
100% {
height: 100%;
}
}
@-moz-keyframes loader-inner {
0% {
height: 0%;
}
25% {
height: 0%;
}
50% {
height: 100%;
}
75% {
height: 100%;
}
100% {
height: 100%;
}
}
@keyframes loader-inner {
0% {
height: 0%;
}
25% {
height: 0%;
}
50% {
height: 100%;
}
75% {
height: 100%;
}
100% {
height: 100%;
}
}
*/
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.