Pace page load does not show loading animation

Question

I have included the page page loader script into my project with cakephp.I can see that it is loading as in body tag I can see the 'pace-running' and 'pace-done' class names.

As soon as I add this

$(function() {
        Pace.on("done", function(){
            alert('done');
            // $("#pageToLoad").fadeIn(1000);
        });
    });

I get the alert and I can see that the div added from pace is active:

<div class="pace pace-active">
<div class="pace-progress" style="transform: translate3d(100%, 0px, 0px);" data-progress-text="100%" data-progress="99">
<div class="pace-progress-inner"></div>
</div>
<div class="pace-activity"></div>
</div>

which shoes me, everything is included well and works well.

But for some reason, I can't see the loading animation on my page. I changed the z-index within the css template file of pace to '99999999' but the progress bar will not display :-(

Answer 1

There is a bug report regarding this. The recommended solution is:

$(document).ajaxStart(function() { Pace.restart(); });

I need something along these lines in one of my projects, but not in another, and I'm not sure what the difference is. :-(