pace.js never reaches 100%

Question

pace.js never reaches 100%

5.3k Views Asked by JustLearning At 10 May 2017 at 08:37

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?

Original Q&A

There are 2 best solutions below

Ari Hernawan On 13 October 2022 at 15:26

//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/

**Yudi Chang** · Accepted Answer · 2017-05-10T09:28:47.760000

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();

pace.js never reaches 100%

There are 2 best solutions below

Related Questions in JQUERY

Related Questions in CSS

Related Questions in PACE

Trending Questions

Popular # Hahtags

Popular Questions