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

2

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>

answered May 10, 2016 at 18:49

Roger

3,2661 gold badge25 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

will0956 Over a year ago

Thanks! That worked! It just won't center now... EDIT (first answer)

will0956 Over a year ago

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

1

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");
});

answered May 10, 2016 at 18:46

Jakub Rożek

2,13013 silver badges12 bronze badges

1 Comment

will0956 Over a year ago

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

1

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

answered May 10, 2016 at 18:48

Jamie R Rytlewski

1,22711 silver badges23 bronze badges

Comments

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

0

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>

answered Jun 7, 2020 at 20:51

Subash Chandra

263 bronze badges

Collectives™ on Stack Overflow

Preloader JavaScript

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related