3

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 compatible to every browser. (It is not working in a Mac app which calls web view).

So I decided to go with some library like pace.js. Now this library works fine, on every Ajax request, but it does not meet my requirement. I also tried to set pace options like: 

paceOptions = {
  ajax: true,
  document: true,
  eventLag: true,
  elements: {
    selectors: ['body']
  }
};

But it does not show bar on page navigation, (It only show bar while loading the new page, but I want it also show while page unload). So my question is : Is there a way to show pace loading bar while navigating pages?

Bashir Abdelwahed
  • 474
  • 4
  • 17
Rakesh Soni
  • 1,293
  • 2
  • 11
  • 27

1 Answers1

-1

This may help your needs.

window.onbeforeunload = renderLoading;

function renderLoading() {
    Pace.stop();
    // Enable the bar manually
    var paceEle = $(Pace.bar.el);
    paceEle.removeClass('pace-inactive').addClass('pace-active');
    var timer = 0;
    var intervalId = setInterval(frame, 100);

    function frame() {
        if (timer === 96) {
            // Clear the timer interval once its reached 96%
            clearInterval(intervalId);
        } else {                
            timer = timer + 1;
            // Increase the Percentage of progressbar
            Pace.bar.progress = timer;
            // Call render function to the progress bar and it updates the percentage of the loading bar.
            Pace.bar.render();
        }
    }
}
Karthickrajan
  • 1
  • 1