Created
July 2, 2016 09:49
-
-
Save tiaanduplessis/141ef2403c27651632e6d94f19e9e43f to your computer and use it in GitHub Desktop.
Page Preloader
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!--Add directly after body tag--> | |
<!-- Preloader --> | |
<div id="preloader"> | |
<div id="status"> </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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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
i got an infinite loading screen. How i can fix that?