how to get the progress percentage with Pace.JS

Question

I am using pace.js to load my website. But i dont want to use pace.js themes. I want to built my theme.

Is there a way that i can get de progress with jquery?

I know only this funciotns:

Pace.on("start", function(){
});
Pace.on("done", function(){
})

score 3 · Accepted Answer · answered Oct 31 '16 at 18:31

3

Just add this at line 296:

Pace.trigger('update', this.progress);

Then get like this:

Pace.on("update", function(percent){
});

answered Oct 31 '16 at 18:31

caiocafardo

196
1
13

Found myself visiting this exact answer multiple times. Pace could really add this nice feature. – Sérgio Reis Jun 05 '17 at 13:39

score 2 · Answer 2 · answered Mar 22 '20 at 21:34

I've done like that

Pace.bar.update = function(prog) {
    Pace.trigger('update', prog)
    this.progress = prog;
    return this.render();
} // override update func to trigger 'update' event

and later

Pace.on('update', progress => {
    console.log('progress -> ', progress);
})

score 0 · Answer 3 · answered Aug 14 '23 at 09:45

In v1.2.4, PaceJS fires the progress event - unfortunately not yet documented. Source code: https://github.com/CodeByZach/pace/blob/v1.2.4/pace.js#L297

So we can bind into this event like that:

Pace.on('progress', function (progress) {
  console.log('Current progres:  ', progress);
});

Output example

Current progres:   7.033010570385887
Current progres:   36.033545715865465
Current progres:   51.343614294233035
Current progres:   67.08097906736533
Current progres:   76.40341932303679
Current progres:   91.56289986667561
Current progres:   100

how to get the progress percentage with Pace.JS

3 Answers3