Hide page while loading with pace.js

Question

I'm working with pace, a page loader, and it works fine. But I can't seem to figure out how to hide the entire page except for the loading bar while the page loads, and show it once the loading completes. Any ideas?

Answer 1

I know this is kind of an old post but I ran into this issue just now and figured out another possible solution :)

Hidden in the Pace documentation is Pace.on(). You can use it to bind to the events listed in the docs, like so:

Pace.on("done", function(){
    $(".cover").fadeOut(2000);
});

Answer 2

I resolved this using the following code.

.pace-running > *:not(.pace) {
  opacity:0;
}

as display:none was causing an issue with alignment in the google maps on the page. this works perfectly and need to add a bit of transition to this.