pace.js will always fall short of reaching 100% complete

I recently integrated pace.js and pace.css into my website.

Following the instructions on the pace website, I added the .js and .css files to the header element as early as possible:

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

However, I faced an issue where the progress never reached 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>

After checking the network tab and console, I found no pending requests or errors present.

What could be causing this incomplete progress?

jquerycsspace

Answer №1

Here is the solution workaround. This code continuously checks the progress of a certain pace every 100ms. If it reaches 99%, a counter is incremented. On each interval, it also verifies if the counter has reached 50, which indicates that the progress has been at 99% for 5 seconds (50 x 100ms), and then stops 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();

Answer №2

//Display progress bar only during regular page navigation and ajax requests, not for every request

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

Find out more in the documentation:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Verify if a window is considered a Popup or not

This inquiry is distinct from the one at if window is popup, but it bears similarities. In my current project, I am working on an extension that injects scripts into all web pages. My challenge lies in determining whether the window is a popup or not. Pl ...

javascriptjqueryhtml

Floating box layout with dual columns and empty space

I have a collection of X posts, each with a set width but varying heights. I am trying to organize them into two columns within a single div-wrapper. However, when I align them all to float left, it results in unwanted blank spaces between the posts. Any ...

csshtmlcss-float

Can you explain the purpose of the datalayer.push function?

I've been puzzling over this.. It seems like data layer.push is simply updating the second amount. Can someone shed light on what exactly is happening here? function dollarz() { var amount1 = '$156.86'; var amount2 = amount1.replace(&quo ...

javascriptphpjquery

Why isn't a single click enough to activate an anchor generated with the Sidr jQuery library in Rails?

I am utilizing a library named Sidr to generate sidebars. I have included all the necessary jQuery and CSS, and while it is operational, I find that I need to double click instead of just one click to open the sidebar. Here is the code snippet. I essentia ...

jquerycssruby-on-railsturbolinkssidr

Guide to utilizing JavaScript for a basic gaming experience

Looking to incorporate multiple divs that will vanish upon being clicked, while also increasing the score by 1 through javascript. Any suggestions on how to accomplish this? ...

javascripthtmlcssonclick

The default value of the input color in HTML/NextJS does not update when changed

Issue: The color input does not change when the default value (#ffffff) is declared. https://i.sstatic.net/BpqUj.png However, it works normally if I don't declare a default value. https://i.sstatic.net/0dBd6.png Note: Using NextJS framework. <i ...

javascripthtmlcssreactjsnext.js

Responsive YouTube video player with adjustable width and fullscreen functionality

I am currently attempting to embed a YouTube video on my website bearblog. My objective is to make the video adaptable in width for both mobile and computer viewing, while also enabling the YouTube fullscreen feature. I have followed the guidelines provid ...

htmlcssvideoyoutube

"Unprecedented occurrence of double events firing in jQuery's sortable and draggable functions

I've implemented some drag and drop code that is functioning properly. However, I have encountered a minor issue. Whenever I add an alert within the drop function for debugging purposes (e.g. alert(draggedItem.text());), it triggers the alert twice wh ...

jquerydoubledraggablejquery-ui-sortabledroppable

Tips for preserving the horizontal scroll position of a div following a toggle using the "blind" effect

My intention is to replicate the functionality demonstrated here: http://jsfiddle.net/cbp4N/17/ $('#cbxShowHide').click(function(){ if(this.checked) { $('#block').show('fast',function() { $(this).scrol ...

jqueryscrollshow-hide

The perplexity of CSS Menus

I have this HTML code, but I'm not sure how to write the CSS so that the drop-down menu appears when I hover over the main li. <li><a href="#">#</a> <ul class="sub_menu"> <li><a hre ...

htmlcss

Personalized design for Sweet alert 2

I am trying to customize a sweetAlert2 by defining a className, but it seems that the styling is not applying to the sweet alert. I have tried calling the class name "styleTitle" and various other names, but nothing seems to work. Could the issue be with t ...

javascriptcssvue.jssweetalert2nuxt.js

Turn off the default automatic AJAX request for DataTables server-side paging

Currently, my dataTable is set up with server-side paging and it works correctly. The table fetches data via ajax during initialization. However, I now require the table to be empty initially and load data only when a button is clicked using either the loa ...

jqueryajaxdatatablesdatatables-1.10

Using Webpack to Compile Sass (and keep class names local)

It's been a long journey trying to configure my Webpack setup to compile Sass, and the process has become quite overwhelming. In my quest for answers, I encountered numerous Github issues, Stackoverflow threads, and blog posts discussing how to integr ...

javascriptcssreactjswebpack

Position the Material UI Box element to the bottom of its parent container

Hello there, I've come across the following layout: <Box width="100%" height="100%" p={1}> <Box my={1} display="flex" justifyContent="center"> </ ...

cssreactjsmaterial-ui

Updates to the Tailwind file are not appearing on the page after reopening the file

Every time I reopen the project, the file tailwind properties do not get rebuilt and if I add new properties like text-color, they are also not reflected. Any suggestions on how to solve this issue? I need the project to update and take in new properties ...

htmlcsstailwind-css

Utilize JavaScript to mimic the submission of a form with a function call

Using jQuery, we have the ability to mimic form submission: <form id="form1" method="post"> <input name="key1" value="value1" /> <input name="key2" value="value2" /> </form> By making an AJAX function call: $.post('& ...

javascriptjqueryajaxforms

The Owl Carousel arrows and dots are perfectly aligned at the same level

When using the owl carousel, I encountered an issue where the arrows and dots are aligned at the same height. I would like to have the arrows centered vertically while keeping the dots at the bottom as they are currently positioned. However, whenever I att ...

jquerycssowl-carousel

In-line Vertical Ticker Display

I attempted to use vTicker, but I found that it does not function properly when used as an inline element. <h1> <div id="vticker"><ul>...</ul></div> Some other headline text </h1> My goal is to have the vertica ...

javascriptjquerycssvticker

The domain retrieval is contingent on the language preference of the user

A task has been assigned to create a script in JavaScript/jQuery (or other suitable technologies) that will return a domain with a .pl extension if the user's browser language is set to Polish. Otherwise, the script should return a .eu domain extensio ...

javascriptjquery

How can I add a loading page to my HTML/CSS website?

Currently, I am delving into the realm of coding and have encountered an issue while trying to integrate a loading page into my HTML. Despite referencing the code from this source, it appears that the loading page is not functioning as intended. Any assist ...

htmlcss