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 https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/ — Jamie R Rytlewski, May 10 '16 at 18:44

score 2 · Answer 1 · answered May 10 '16 at 18:49

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 '16 at 18:49

Roger

3,226
1
22
38

Thanks! That worked! It just won't center now... [EDIT](http://stackoverflow.com/questions/356809/best-way-to-center-a-div-on-a-page-vertically-and-horizontally) (first answer) – will0956 May 10 '16 at 19:01
It also won't hide the body until page load, which I want it to do – will0956 May 10 '16 at 19:24

score 1 · Answer 2 · answered May 10 '16 at 18:46

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 '16 at 18:46

Jakub Rożek

2,110
11
12

It does [this](http://i.imgur.com/t7lukgn.gifv) 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 – will0956 May 10 '16 at 18:53

score 1 · Answer 3 · answered May 10 '16 at 18:48

1

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

answered May 10 '16 at 18:48

Jamie R Rytlewski

1,172
9
22

score 0 · Answer 4 · answered Jun 07 '20 at 20:51

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>

Preloader JavaScript

4 Answers4