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.
pace.js "Hide everything but PACE until the page has fully loaded" local copy
6.4k views Asked by sebko At
3
There are 3 answers
1
On
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…
0
On
After much trial-and-error, I solved this with a JS-only approach. Here's how it works:
- When the
startorrestartPace events happen, aka when the loading indicator is shown, a full-screendivis appended - This effectively hides the page content, then prevents page interaction, like button clicks
- When the
hidePace event happens, aka when the loading indicator is hidden, the full-screendivis 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/
I fixed this by adding this css