13

I'm using Pace.JS to display a loader anytime I make AJAX calls to a REST service. Pace is working perfectly here except, the page is still interactive while the loader is spinning. I really don't want the page to be interactive while I'm trying to load data.

To fix this, I want to SHOW a div (white with a high opacity to simulate a modal) with a Z-Index of 1999 covering the entire page (width/height = 100%) while the Pace.JS loading animation is active (at Z-Index 2000 so it's sitting on top of the modal), and hide the div when the Pace.JS loading animation is complete to limit what a user can interact with while I'm loading data.

I've seen the events (start, restart, hide) on the Pace.JS hubspot homepage (http://github.hubspot.com/pace/) but there are no examples of actually using it and everything I've tried hasn't worked.

Can someone post an example of how to do what I'm looking for? It would really, really help me. Thanks!

Capt. Rochefort
  • 716
  • 1
  • 10
  • 17

2 Answers2

17

You can achieve your goal with the following:

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

Hope it's no too late though!

Ben
  • 10,106
  • 3
  • 40
  • 58
John Brunner
  • 2,842
  • 11
  • 44
  • 85
  • Worked like a charm for me! Great one! – Xentatt Sep 10 '14 at 08:27
  • having trouble with this as well...Ive placed the above code in the doc ready right below the pace js...but it only triggers on the pace done...am I putting it in the wrong spot? – Drew Mar 22 '15 at 02:51
-1

This is a old post, but i've fixed this just with 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;}
Jorge Salitre
  • 7
  • 2