Как показать Div во время загрузки с помощью Pace.JS

Я использую Pace.JS для отображения загрузчика в любое время, когда я делаю вызовы AJAX службе REST. Pace отлично работает здесь, кроме того, страница по-прежнему интерактивна, когда загрузчик вращается. Я действительно не хочу, чтобы страница была интерактивной, когда я пытаюсь загрузить данные.

Чтобы исправить это, я хочу ПОКАЗАТЬ div (белый с высокой непрозрачностью для имитации модального) с Z-индексом 1999 года, охватывающим всю страницу (ширина/высота = 100%), в то время как анимация загрузки Pace.JS(в Z-Index 2000, так что он сидит поверх модального), и скрыть div, когда анимация загрузки Pace.JS завершена, чтобы ограничить взаимодействие пользователя во время загрузки данных.

Я видел события (начало, перезапуск, скрыть) на домашней странице Pace.JS hubspot (http://github.hubspot.com/pace/), но нет примеров фактического использования это и все, что я пробовал, не сработало.

Может ли кто-нибудь опубликовать пример того, как делать то, что я ищу? Это действительно помогло бы мне. Спасибо!

Ответ 1

Вы можете достичь своей цели следующим образом:

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();
});

Надеюсь, что это не слишком поздно!

Ответ 2

Это старый пост, но я исправил это только с помощью 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;}