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?

possible duplicate of [pace.js "Hide everything but PACE until the page has fully loaded" local copy](http://stackoverflow.com/questions/28599741/pace-js-hide-everything-but-pace-until-the-page-has-fully-loaded-local-copy) — mark.monteiro, May 12 '15 at 03:55

score 14 · Answer 1 · answered Jun 07 '14 at 13:49

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);
});

score 9 · Answer 2 · answered May 16 '16 at 09:50

9

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.

answered May 16 '16 at 09:50

Jakki

349
4
6

score 6 · Answer 3 · edited Mar 27 '15 at 05:09

You don't need to hide the page. Just make a fixed element that covers your page without showing it, then fade it away with loading the function.

$(window).load(function() {
        $(".cover").fadeOut(2000);
    })

.cover {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 1999;
    background:rgb(33,33,33);
}

And you can add a loading .gif or something to the container, it will vanish when your page is fully loaded.

score 2 · Answer 4 · answered Jan 19 '16 at 14:47

I know this question is fairly old, but I managed to get this working with one small block of CSS.

.pace-running > *:not(.pace) {
  display: none;
}

This utilises the class that PACE places on the <body> element while the page loading is in process. Take note, this might make the page disappear during long AJAX requests... You could probably get around that by making some Javascript to check for the .pace-running class to be removed from the <body> element. If you don't have any XHR requests, though, you should be fine with just this.

score 1 · Answer 5 · answered Dec 27 '15 at 14:13

Pace.js actually adds a class to the body. 'pace-running' is added while pace is active, replaced with pace-done when it's completed.

You can certain css then:

.pace-running{
  opacity: .67;
  background-color: #2E2E2E;
}

You can edit the above code according to your needs.

score 1 · Answer 6 · answered Nov 30 '16 at 13:18

1

If you decide not to use opacity, you could try:

.pace-running {
    background: rgba(250,250,250, 1);
    color: rgba(200,200,200, 1);
}

Less code required to reduce the visibility or hide the background page while Pace.js is running

answered Nov 30 '16 at 13:18

Anthony

31
1

Stack Overflow User · Answer 7 · 2015-07-31T10:08:36.550

Try it below example simple and easy....

find set id for whole page container div

<body>
    <div id="pagecontent">
        Loaded asdasdas das das
        dasd
        asd
        asdasdasdasdasdasdasdasdasd

    </div>
</body>

after put this css is based on whatever you mentioned in whole container ID

#pagecontent {
    opacity: 0;
}

#pagecontent {
                    -webkit-transform: opacity 0.5s ease;
                    -moz-transform: opacity 0.5s ease;
                    -o-transform: opacity 0.5s ease;
                    -ms-transform: opacity 0.5s ease;
                    transform: opacity 0.5s ease;
}

body.pace-running #pagecontent {
    opacity: 0;
}
body.pace-done #pagecontent {
    opacity: 1;
}

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;

  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;

  z-index: 2000;
  position: fixed;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  width: 200px;
  background: #fff;
  border: 1px solid #f2851f;

  overflow: hidden;
}

.pace .pace-progress {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;

  -webkit-transition: translate3d(0, 0, 0);
  -moz-transition: translate3d(0, 0, 0);
  -ms-transition: translate3d(0, 0, 0);
  -o-transition: translate3d(0, 0, 0);
  transition: translate3d(0, 0, 0);

  max-width: 200px;
  position: fixed;
  z-index: 2000;
  display: block;
  position: absolute;
  top: 0;
  right: 100%;
  height: 100%;
  width: 100%;
  background: #f2851f;
}

 .pace.pace-inactive {
   display: none;
 }

FYR:

http://jsfiddle.net/686rugps/

In `#pagecontent {}`, shouldn't it be `transition` instead of `transform`? — Punchlinern, Jul 30 '15 at 19:33

Hide page while loading with pace.js

7 Answers7

Linked