Come visualizzare Div durante il caricamento con Pace.JS

Question

Sto utilizzando Pace.JS per visualizzare un caricatore ogni volta che effettuo chiamate AJAX a un servizio REST. Pace funziona perfettamente qui eccetto, la pagina è ancora interattiva mentre il caricatore sta girando. Non voglio davvero che la pagina sia interattiva mentre sto provando a caricare i dati.

Per risolvere questo problema, voglio MOSTRARE un div (bianco con alta opacità per simulare un modale) con un indice Z del 1999 che copre l'intera pagina (larghezza/altezza = 100%) mentre il caricamento di Pace.JS l'animazione è attiva (in Z-Index 2000 quindi è posizionata sopra il modale) e nasconde il div quando l'animazione di caricamento di Pace.JS è completa per limitare l'interazione di un utente durante il caricamento dei dati.

Ho visto gli eventi (avvio, riavvio, nascondere) sulla home page HubSpot Pace.JS (http://github.hubspot.com/pace/), ma non ci sono esempi di realtà usarlo e tutto ciò che ho provato non ha funzionato.

Qualcuno può pubblicare un esempio di come fare ciò che sto cercando? Mi aiuterebbe davvero, davvero. Grazie!

Answer 1

È possibile raggiungere il tuo obiettivo con il seguente:

CSS:

div.paceDiv { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    ... 
    display: none; 
} 

JS:

Pace.on("start", function(){ 
    $("div.paceDiv").show(); 
}); 

Pace.on("done", function(){ 
    $("div.paceDiv").hide(); 
}); 

sperare che non sia troppo tardi però!

Answer 2

Si tratta di un vecchio post, ma ho risolto questo solo con i CSS

pace-running::after { 
position: absolute; 
background-color: #ffffff; 
opacity: 0.1; 
top:0; 
left: 0; 
right: 0; 
width: 100%; 
height: 100%; 
content: ' ', 
z-index: 9998;}