An automatic web page progress bar. Pace will automatically monitor your Ajax requests, event loop lag, document ready state and elements on your page to decide on the progress.
Questions tagged [pace.js]
20 questions
9
votes
3 answers
pace.js "Hide everything but PACE until the page has fully loaded" local copy
I was able to hide everything but pace until the page had loaded when installing pace.js with eager.io.
However, when using bower to install the plugin and downloading the css theme, I was unable to figure out how to do this.

sebko
- 545
- 4
- 13
8
votes
4 answers
pace.js: "start" event not triggered?
I can't seem to find a solution to this problem I posted in the comments of this question
… I'm using the pace.js plugin and I would love to load/show parts of my page immediately without having to wait for the preloader to load all content.
I…

matt
- 42,713
- 103
- 264
- 397
6
votes
1 answer
Pace.js(Progress bar) for Ajax request is not working
In the documentation, it is written that you don't need to write code in general to use it. I have added that in my website, It is working fine on page load. But for any ajax request, it is not working. Do I need to add anything for ajax request?

Niks
- 95
- 1
- 5
3
votes
1 answer
Use pace.js progress bar on page navigation
Here is what I want to achieve : To show progress bar on every page navigation (not a SPA).
So I tried :
$(window).on('beforeunload', function () {
showLoadingBar();
});
This is working fine in most of case. But some how it is not…

Rakesh Soni
- 1,293
- 2
- 11
- 27
3
votes
4 answers
How do I append Pace.js to a custom location in the DOM?
I'm using Pace.js (http://github.hubspot.com/pace/) for a basic loader.
It works great with no issues so far. However, what I would like to do, is append the Pace.js HTML to be inside an element of my choice.
The generated HTML looks like:

Michael Giovanni Pumo
- 14,338
- 18
- 91
- 140
2
votes
0 answers
Use pace.js while file download is called
I would like to setup pace.js so it shows a loading animation while a pdf file is retrieved on server. But the default configuration of pace.js isn't doing it: When I click in the download link () my browser shows it's loading, but pace.js don't…

Bruno Lamps
- 544
- 6
- 27
2
votes
2 answers
Pace.js not waiting for iframes to fully load
I'm using pace.js on my site and I'm having difficulties with pages that have iframes. Is there a way to make it so that pace.js takes into account the content loading inside of those iframes?
I've tried setting the paceOptions to wait for the…

skrubbles
- 21
- 2
2
votes
3 answers
Animation not showing when ajax request in pace.js
In my website http://www.eventiame.com/publicar/ there's a form with several fields.
When the page loads it shows the pace animation (it does some ajax request when loading so that's ok) but when I submit the form (I do it via ajax too) the…

AliNasiri
- 137
- 1
- 3
- 11
1
vote
0 answers
Stopping pacejs on smoothstate links
I'm trying to stop pace.js to load when the user clicks on Smoothstate links.
I thought calling Pace.stop inside smoothscroll on events, using the ignore setting but still the event is triggered.
$('.chronology-nav a').click ->
…

adam
- 618
- 2
- 11
- 31
1
vote
0 answers
Pace.js Implementation
Am trying to setup pace.js. To show progress bar during upload and download. Intially am setting the startOnPageLoad: false, so it will no appear during page load. While clicking download or upload am calling the Pace.Restart(). And loading bar…

Dinesh Kumar
- 11
- 2
1
vote
1 answer
increase progressbar loading time in pace.js
I am using pace.js plugin, it works fine but I want that the progress bar will show for longer time, mean to increase the loading time, so user will see the loading screen for long time, by default it run fast.
I will also look at these options but…
user4259777
0
votes
0 answers
Pace is not working for every ajax call on page
Using following code in my page:
var paceOptions = {
ajax: {
trackMethods: ['GET', 'POST', 'PUT', 'DELETE', 'REMOVE'],
restartOnRequestAfter: true
}
};
Still it is not working for the small ajax request.

smita chougale
- 235
- 5
- 19
0
votes
0 answers
How i can get 2 loaders on same page. I am Using pace.js
This is the loader I am working on. The loader portion is working fine. But I also want to move that "balloon" div along with loader, like when the loader is on 0 the balloon will be like down, and when the loader is 100%, the balloon will move…

Adnan Zahid
- 1
- 2
0
votes
2 answers
Pace Js when "done" the body scrolls up
I'm using the lovely pace.js as my page loader.
I created a #cover to hide all the content while the loading process complete.
#cover{
position:fixed;
top:0;
left:0;
background:#000;
z-index:99999;
width:100%;
height:100%
}
All I want, when the…

Federico
- 1,392
- 1
- 17
- 40
0
votes
1 answer
Weird Shape Pace.js
Just installed pace.js and paceThemeRound.css (centre radar theme) and I get a weird shape as image below. The problem is due to the fact that the script is conflicting with bootstrap.min.css. If I remove it from my website it is working…

QGA
- 3,114
- 7
- 39
- 62