2

I have added pace.js and pace.css to my site.

As indicate on the pace website, all i need to do is to add .js and .css as early as possible in the header element,so i did:

<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title - My ASP.NET Application</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta content="" name="description" />
    <meta content="" name="author" />
    <script src="~/Scripts/global/pace.min.js"></script>
    <link href="~/Content/global/pace-theme-flash.css" rel="stylesheet" />

The problem is that it never reaches 100%:

<div class="pace pace-active"><div class="pace-progress" data-progress-text="99%" data-progress="99" style="transform: translate3d(100%, 0px, 0px);">
  <div class="pace-progress-inner"></div>
</div>
<div class="pace-activity"></div></div>

There is nothing pending in the network tab and no errors in the console.

What am i missing here?

JustLearning
  • 3,164
  • 3
  • 35
  • 52
  • I already search this issue everywhere, even in its github before, but no real solution. I have a solution where, if it's already stuck on 99% for X seconds, I'll stop the pace loading. if you want it, I'll put the solution. – Yudi Chang May 10 '17 at 09:05
  • 1
    ya u can post as an answer, but i was not really looking for a work around, rather plug and play as advertised by the plugin – JustLearning May 10 '17 at 09:22

2 Answers2

4

Here's is the workaround. In this code, I'll check what's the current progress of pace every 100ms. if it's already 99(%), I'll add up a counter (counter++). then, everytime it runs this interval, I'll also check if the counter already 50 , which mean, if it's true, then I already check the current progress && it's 99% for 5 seconds (50 x 100ms) and stop the pace.

var initDestroyTimeOutPace = function() {
    var counter = 0;

    var refreshIntervalId = setInterval( function(){
        var progress; 

        if( typeof $( '.pace-progress' ).attr( 'data-progress-text' ) !== 'undefined' ) {
            progress = Number( $( '.pace-progress' ).attr( 'data-progress-text' ).replace("%" ,'') );
        }

        if( progress === 99 ) {
            counter++;
        }

        if( counter > 50 ) {
            clearInterval(refreshIntervalId);
            Pace.stop();
        }
    }, 100);
}
initDestroyTimeOutPace();
Yudi Chang
  • 428
  • 7
  • 17
0

//Only show the progress on regular and ajax-y page navigation, not every request

data-pace-options='{"eventLag": false,"restartOnRequestAfter": false}'

Documentation: https://codebyzach.github.io/pace/docs/

Ari Hernawan
  • 11
  • 2