Pace.js "Hide everything except PACE until the page is fully loaded", local copy

Question

I managed to hide everything except the tempo until the page loaded when installing pace.js from eager.io .

However, when using the gazebo to install the plugin and download the css theme, I was not able to figure out how to do this.

Answer 1

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 } 

Answer 2

the previous answer works in most cases, but if for some reason the speed.js function is disabled, your body will retain its opacity to 0, and your content will not 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, it's up to you to add prefixes or pseudo-classes ...