Preloader JavaScript

Question

I'm trying to make a preloader, I currently have this code, but it's not showing the preloader before the page loads.

$(document).ready(function(){ $(".preloader-wrapper").show(); $("body").hide(); }); $(window).load(function(){ $(".preloader-wrapper").fadeOut("slow", function(){ $("body").fadeIn("slow"); }); });

EDIT: Got it.

setTimeout(function() { $('#preloader').fadeOut('slow', function() { $(this).remove(); }); }, 2000); #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; }

what does your HTML look like? could you setup a JSFiddle or a stack snippet blog.stackoverflow.com/2014/09/… — Jamie R Rytlewski
– Jamie R Rytlewski, Commented May 10, 2016 at 18:44

Roger · Accepted Answer · 2016-05-10 18:49:38Z

You can have it loaded first and on top. Then just remove it after the dom is loaded.

setTimeout(function() { $('#preloader').fadeOut('slow', function() { $(this).remove(); }); }, 2000);

#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; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="preloader"></div> <h1>SUPER SIMPLE FULL PAGE PRELOADER</h1>

Thanks! That worked! It just won't center now... EDIT (first answer)
It also won't hide the body until page load, which I want it to do

Jakub Rożek · Accepted Answer · 2016-05-10 18:46:38Z

You should set the .preloader-wrapper to be visible as default - use css for this.

Example:

.preloader-wrapper { display: block; }

Also, you shouldn't place something outside the <body> tag, so this means you shouldn't hide body using JS.

Remove:

$(document).ready(function(){ $(".preloader-wrapper").show(); $("body").hide(); });

Change the second piece of your code to:

$(window).load(function(){ $(".preloader-wrapper").fadeOut("slow"); });

It does this now. How can I get it to be centered on the entire page? I also want to make it not move the page, like the gif

Jamie R Rytlewski · Accepted Answer · 2016-05-10 18:48:26Z

One of the issues is that you are hiding the entire body, which probably includes the .preloader-wrapper

Subash Chandra · Accepted Answer · 2020-06-07 20:51:44Z

Try this simple Preloader with css and javascript. no need to add any library. Sample Blog : https://www.kingsubash.com/simple-page-preloader-with-css-and-javascript

window.onload = function(){ //hide the preloader document.querySelector(".preloader").style.display = "none";

}

.preloader{position: fixed;top: 0;left: 0;width: 100%;height: 100vh;background: #fff;z-index: 9999;text-align: center;}.preloader-icon{position: relative;top: 45%;width: 100px;border-radius: 50%;} <div class="preloader"> <img class="preloader-icon" src="/PATH-TO-IMAGE" alt="My Site Preloader"> </div>

Collectives™ on Stack Overflow

Preloader JavaScript

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Linked

Related