pace.js «Скрыть все, кроме PACE, пока страница не будет полностью загружена», местная копия

Question

Мне удалось скрыть все, кроме темпа, пока страница не загрузилась при установке pace.js with eager.io.

Однако при использовании беседки для установки плагина и загрузки темы css мне не удалось выяснить, как это сделать.

Answer 1

Я это исправил, добавив этот 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

Предыдущий ответ работает в большинстве случаев, но если по какой-либо причине pace.js отключен, ваше тело будет держать его непрозрачность до 0, а содержимое не будет будет показано. Следующие правила избежать этой проблемы:

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

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

Тогда до вас, чтобы добавить префиксы или псевдо-классы ...