Instantly share code, notes, and snippets.

Embed
What would you like to do?
Page Preloader
<!--Add directly after body tag-->
<!-- Preloader -->
<div id="preloader">
<div id="status">&nbsp;</div>
</div>
<!--Below jquery include-->
<!-- Preloader -->
<script type="text/javascript">
//<![CDATA[
$(window).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'});
})
//]]>
</script>
body {
overflow: hidden;
}
/* Preloader */
#preloader {
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color:#fff; /* change if the mask should have another color then white */
z-index:99;
}
#status {
width:200px;
height:200px;
position:absolute;
left:50%;
top:50%;
background-image:url(../img/status.gif); /* path to your loading animation */
background-repeat:no-repeat;
background-position:center;
margin:-100px 0 0 -100px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment