I'm using pace.js to show the loading progress bar and my main aim is to show the progress bar only when the page is refreshed not when a user clicks a link or <a> tag.

I'm using barba.js to show the page transitions when user clicks on <a> tag, but pace messes up everything and shows the loading progress bar during page transitions.

Is there any way to stop this?

Sample code: https://plnkr.co/plunk/89xXTEFDn6yspNa9

In this, if you click on the "go to about page" or "go to main page", you'll notice that loading bar appears everytime and i don't want that . Please help

(Sorry for the bugs, i made this sample in a hurry. If it doesn't work then refresh twice)