I would like to add preloader with a 'loading' gif image for a maximum of 5 seconds before my website loads. I have tried many methods but it is not working can you guys please help me with this?
Reference: https://www.itchotels.in/. I want to have something like this. Thanks in advance.
Try This...
$(window).on('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'});
})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;
/* makes sure it stays on top */
}
#status {
width: 200px;
height: 200px;
position: absolute;
left: 50%;
/* centers the loading animation horizontally one the screen */
top: 50%;
/* centers the loading animation vertically one the screen */
background-image: url(https://raw.githubusercontent.com/niklausgerber/PreLoadMe/master/img/status.gif);
/* path to your loading animation */
background-repeat: no-repeat;
background-position: center;
margin: -100px 0 0 -100px;
/* is width and height divided by two */
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Preloader -->
<div id="preloader">
<div id="status"> </div>
</div>
<img width="100%" src='https://unsplash.it/3000/3000/?random' />