How to properly implement setTimeout function to p

Question

I have a situation trying to implement this pulse loader code into my theme pages.

As far as I've read, somehow there should be a setTimeout (function() implemented but not so sure how to integrate this into my js file:

jQuery(document).ready(function(){ 
    setTimeout(function(){
        $("div.loader").fadeOut( 500, function(){
            $("div#content").fadeIn( 3000);
        });
      }, 2500);
    });

In a few words, the pulse dot, it doesn't show up before the page content appearance, like we have in this site example, it show up in the same time (too late) almost when the content is already loaded.

My result with Live examples: here;

If this helps, here is the original theme js sequence from the app.min.js file, that should manage a .gif loader:

...
    var $doc = $(document), win = $(window), Modernizr = window.Modernizr, AnimationsArray = [];
    window.SITE = {
        init: function() {
            var self = this, content = $("#wrapper"), pl = content.find(">.preloader"), count = $("body").data("cart-count");
            favicon = new Favico({
                bgColor: "#151515",
                textColor: "#fff"
            }), favicon.badge(count), content.waitForImages(function() {
                TweenMax.to(pl, 1, {
                    autoAlpha: 0,
                    ease: Quart.easeOut,
                    onComplete: function() {
                        pl.css("display", "none");
                    }
                }); 
...        

I've replaced .loader with .sk-spinner-pulse.sk-spinner resulting:

...
    var $doc = $(document), win = $(window), Modernizr = window.Modernizr, AnimationsArray = [];
    window.SITE = {
        init: function() {
            var self = this, content = $("#wrapper"), pl = content.find(">.sk-spinner-pulse.sk-spinner"), count = $("body").data("cart-count");
            favicon = new Favico({
                bgColor: "#151515",
                textColor: "#fff"
            }), favicon.badge(count), content.waitForImages(function() {
                TweenMax.to(pl, 1, {
                    autoAlpha: 0,
                    ease: Quart.easeOut,
                    onComplete: function() {
                        pl.css("display", "none");
                    }
                }); 
...

Also in css I had in the preloader section:

...
#wrapper .preloader {
  position: fixed;
  z-index: 998;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 80px 60px 0;
  background: #f9f9f9 url("../img/preloader.gif") center center no-repeat;
  -moz-background-size: 55px 55px;
  -o-background-size: 55px 55px;
  -webkit-background-size: 55px 55px;
  background-size: 55px 55px;
}
.site_bars_off #wrapper .preloader {
  margin-left: 0;
  margin-right: 0;
}
.site_bars_off #wrapper .preloader {
  margin-left: 0;
  margin-right: 0;
}
@media only screen and (max-width: 40.063em) {
  #wrapper .preloader {
    margin-left: 0;
    margin-right: 0;
  }
}
...

modified as follow:

...
#wrapper .sk-spinner-pulse.sk-spinner {
  left: 50%;
  position: fixed;
  top: 50%;
  width: 45px;
  height: 45px;
  margin: 0 auto;
  background-color: gold;
  border-radius: 100%;
  -webkit-animation: sk-pulseScaleOut 1s infinite ease-in-out;
  animation: sk-pulseScaleOut 1s infinite ease-in-out;
}

@-webkit-keyframes sk-pulseScaleOut {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}
@keyframes sk-pulseScaleOut {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}

.site_bars_off #wrapper .sk-spinner-pulse.sk-spinner {
  margin-left: 0;
  margin-right: 0;
}
.site_bars_off #wrapper .sk-spinner-pulse.sk-spinner {
  margin-left: 0;
  margin-right: 0;
}
@media only screen and (max-width: 40.063em) {
  #wrapper .sk-spinner-pulse.sk-spinner {
    margin-left: 0;
    margin-right: 0;
  }
}
...

In header.php I've replaced:

...
<!-- Start Loader -->
<div class="preloader"></div>
<!-- End Loader -->
...

with:

...
<!-- Start Loader -->
<div class="sk-spinner sk-spinner-pulse"></div>
<!-- End Loader -->
...

Any thoughts?

Answer 1

Use window.onload event to make the animation instead of using a timeout. Example:

jQuery(function($){ 
    $(window).load(function(){ 
        $(".sk-spinner-pulse").fadeOut(500);
        $("#wrapper").css("opacity","1");
    });
});

window.onload waits for the document and all it's images to load.

The pulse loader should be visible once the document loads, it should be outside your #wrapper div.