I am using a preloader for my website. I simply designed it using CSS and coded the logic to hide the preloader when the website gets completely loaded. The whole thing works on my local machine but when i put it online it doesn't work.
This is the link to the website : http://deepanshubatra.tk (Use google chrome please)
I am mentioning the HTML,CSS and javascript code:
CSS:
div#preloader { position: fixed; left: 0; top: 0; z-index: 999; width: 100%; height: 100%; overflow: visible; background: #333 url('http://files.mimoymima.com/images/loading.gif') no-repeat center center; }
Javascript
<script >
jQuery(document).ready(function($) {
// site preloader -- also uncomment the div in the header and the css style for #preloader
$(window).load(function(){
$('#preloader').fadeOut('slow',function(){$(this).remove();});
});
});
</script>
HTML
<div id="preloader"></div>
You have error in console:
Uncaught ReferenceError: jQuery is not defined
Add <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> to your head tag.