How to properly implement setTimeout function to pulse loader

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?

Daniel Cardoso · Accepted Answer · 2015-06-06T22:17:20.217

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.

edited Jun 06 '15 at 22:17

answered Jun 06 '15 at 17:25

Daniel Cardoso

478
3
14

hey there, a little bit offtopic but, do you have any ideas the above solution can be usefull somehow to solve this issue or AJAX content loader actually is a different concept? someone recommend me to use AJAX to load the new content but so sure if this can be applied here (http://stackoverflow.com/q/32687806/4642215) I appreciate it – typo_ Sep 24 '15 at 08:03

How to properly implement setTimeout function to pulse loader

1 Answers1

Linked