Skip to content

Instantly share code, notes, and snippets.

@tiaanduplessis
Created July 2, 2016 09:49
Show Gist options
  • Save tiaanduplessis/141ef2403c27651632e6d94f19e9e43f to your computer and use it in GitHub Desktop.
Save tiaanduplessis/141ef2403c27651632e6d94f19e9e43f to your computer and use it in GitHub Desktop.
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;
}
@therionman
Copy link

i got an infinite loading screen. How i can fix that?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment