Simple preloader

//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.