9

I was able to hide everything but pace until the page had loaded when installing pace.js with eager.io.

However, when using bower to install the plugin and downloading the css theme, I was unable to figure out how to do this.

Adam
  • 1,744
  • 1
  • 14
  • 34
sebko
  • 545
  • 4
  • 13

3 Answers3

32

I fixed this by adding this css

body > :not(.pace),body:before,body:after {
  -webkit-transition:opacity .4s ease-in-out;
  -moz-transition:opacity .4s ease-in-out;
  -o-transition:opacity .4s ease-in-out;
  -ms-transition:opacity .4s ease-in-out;
  transition:opacity .4s ease-in-out
}

body:not(.pace-done) > :not(.pace),body:not(.pace-done):before,body:not(.pace-done):after {
  opacity:0
}
sebko
  • 545
  • 4
  • 13
5

The previous answer works in most cases but if for any reason pace.js is disabled, your body will keep its opacity to 0 and your content won't be shown. The following rules avoid this problem:

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

.pace-done > :not(.pace) {
  opacity: 1;
  transition: opacity .5s ease;
}

Then, up to you to add prefixes or pseudo-classes…

NicolasGraph
  • 71
  • 1
  • 4
0

After much trial-and-error, I solved this with a JS-only approach. Here's how it works:

  • When the start or restart Pace events happen, aka when the loading indicator is shown, a full-screen div is appended
  • This effectively hides the page content, then prevents page interaction, like button clicks
  • When the hide Pace event happens, aka when the loading indicator is hidden, the full-screen div is removed

UI Note: The OP said "hide everything" which is why the div has an opacity of 1. But, my personal preference is to still show the page, just "grayed out". So I set the opacity to 0.7 or so.

Here's a minimal, reproducible example. It assumes these files are side-by-side in the same directory:

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Pace Playground</title>

    <!-- Start of required code -->
    <script src="https://cdn.jsdelivr.net/npm/pace-js@latest/pace.min.js"></script>
    <script src="./pace-config.js"></script>
    <link href="./pace-theme.css" rel="stylesheet" />
    <!-- End of required code -->
  </head>

  <body>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </body>
</html>

pace-config.js

(() => {
  const paceZIndex = 2000;
  const id = "page_interaction_blocker";

  const appendBlocker = () => {
    if (document.getElementById(id)) {
      return;
    }

    const el = document.createElement("div");

    el.id = id;
    el.style.position = "fixed";
    el.style.top = 0;
    el.style.bottom = 0;
    el.style.left = 0;
    el.style.right = 0;
    el.style.zIndex = paceZIndex - 1;
    el.style.backgroundColor = "#fff";
    el.style.opacity = 1;

    document.body.appendChild(el);
  };

  const removeBlocker = () => {
    const el = document.getElementById(id);

    if (el) {
      el.remove();
    }
  };

  Pace.on("start", appendBlocker);
  Pace.on("restart", appendBlocker);
  Pace.on("hide", removeBlocker);
})();

pace-theme.css

Pick a theme from https://codebyzach.github.io/pace/

Zachary Betz
  • 1