Stack Overflow
Stack Overflow

Questions tagged [pace]

Progress indicator for your page load and ajax navigation.

Pace is a library that automatically monitors your ajax requests, event loop lag, document ready state, and elements on your page.

It adds a progress bar whenever it determines that the page is loading.

29 questions
4
votes
2 answers

Pace.js not working in IE 11

I have an angular-cli project. I have also added pace. I added it inside the header in index.html . It works correctly in chrome, but in IE-11 I get the following error: ERROR TypeError: Invalid…
gyozo kudor
  • 6,284
  • 10
  • 53
  • 80
4
votes
3 answers

how to get the progress percentage with Pace.JS

I am using pace.js to load my website. But i dont want to use pace.js themes. I want to built my theme. Is there a way that i can get de progress with jquery? I know only this funciotns: Pace.on("start", function(){ }); Pace.on("done",…
caiocafardo
  • 196
  • 1
  • 13
3
votes
1 answer

Percentage loading bar for React / Redux app like Pace.js that only shows on initial page load

I'm trying to find the best way to have a loading bar for my website done in React (create-react-app) / Redux that shows the percentage of the page load. However I only want this to appear once during the initial page load and every subsequent ajax…
cheng
  • 1,264
  • 2
  • 18
  • 41
2
votes
0 answers

Fetch walking distance on HealthKit by splits

I am working on an app that uses HealthKit framework to pull data and display it to the user. I have been able to check how many meters has the user walked in a given HKWorkoutSession, by creating a HKStatisticsQuery. Now, I want to get more details…
southern_dev
  • 43
  • 3
2
votes
1 answer

Pace.js waiting for 101 Switching Protocols

I have included pace.js on my html page to show default progress bar. After reloading page progress bar remains for more than 2-3 mins. When I had look at developer tool I found that pace.min.js is making request of type 'websocket'. My question…
user2243747
  • 2,767
  • 6
  • 41
  • 61
2
votes
2 answers

pace.js never reaches 100%

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: @ViewBag.Title - My ASP.NET…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/jquery" class="post-tag grid--cell" title="show questions tagged 'jquery'" rel="tag">jquery</a> <a href="../../questions/tagged/css" class="post-tag grid--cell" title="show questions tagged 'css'" rel="tag">css</a> <a href="../../questions/tagged/pace" class="post-tag grid--cell" title="show questions tagged 'pace'" rel="tag">pace</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked May 10 '17 at 08:37">asked May 10 '17 at 08:37</time> <a href="../../users/3690301/justlearning" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/3690301.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="JustLearning" /> </a> <div class="s-user-card--info"> <a href="../../users/3690301/justlearning" class="s-user-card--link">JustLearning</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">3,164</li> <li class="s-award-bling s-award-bling__gold" title="3 gold badges">3</li> <li class="s-award-bling s-award-bling__silver" title="35 silver badges">35</li> <li class="s-award-bling s-award-bling__bronze" title="52 bronze badges">52</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-42236286"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>2</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status answered-accepted"> <strong>1</strong> answer </div> </div> </div> <div class="summary"> <h3><a href="../../questions/42236286/pace-track-http-requests-in-angularjs" class="question-hyperlink">Pace: Track $http requests in angularjs?</a></h3> <div class="excerpt">Question from github: https://github.com/HubSpot/pace/issues/154 I'm trying to get pace to work with my angularjs app. Everything works fine with page loads but when I make a $http call pace doesn't show the progress. Any ideas? I tried using this…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/pace" class="post-tag grid--cell" title="show questions tagged 'pace'" rel="tag">pace</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Feb 14 '17 at 21:11">asked Feb 14 '17 at 21:11</time> <a href="../../users/748766/liam" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/748766.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Liam" /> </a> <div class="s-user-card--info"> <a href="../../users/748766/liam" class="s-user-card--link">Liam</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">2,837</li> <li class="s-award-bling s-award-bling__silver" title="23 silver badges">23</li> <li class="s-award-bling s-award-bling__bronze" title="36 bronze badges">36</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-65521652"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>1</strong></span> <div class="viewcount">vote</div> </div> </div> <div class="status "> <strong>0</strong> answers </div> </div> </div> <div class="summary"> <h3><a href="../../questions/65521652/pace-js-not-working-with-axios-inside-vue" class="question-hyperlink">Pace-js not working with Axios inside Vue</a></h3> <div class="excerpt">I have the following axios call: //Pace.restart(); Pace.start(); axios.post(`${this.url_base}/${this.system}`, consulta) .then((response) => { console.log(response); }) .catch((error) => { console.log(error.response.data); }) .then(() => { …</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/vue.js" class="post-tag grid--cell" title="show questions tagged 'vue.js'" rel="tag">vue.js</a> <a href="../../questions/tagged/axios" class="post-tag grid--cell" title="show questions tagged 'axios'" rel="tag">axios</a> <a href="../../questions/tagged/pace" class="post-tag grid--cell" title="show questions tagged 'pace'" rel="tag">pace</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Dec 31 '20 at 13:38">asked Dec 31 '20 at 13:38</time> <a href="../../users/5728714/mathias-hillmann" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/5728714.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Mathias Hillmann" /> </a> <div class="s-user-card--info"> <a href="../../users/5728714/mathias-hillmann" class="s-user-card--link">Mathias Hillmann</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">1,537</li> <li class="s-award-bling s-award-bling__gold" title="2 gold badges">2</li> <li class="s-award-bling s-award-bling__silver" title="13 silver badges">13</li> <li class="s-award-bling s-award-bling__bronze" title="25 bronze badges">25</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-45263100"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>1</strong></span> <div class="viewcount">vote</div> </div> </div> <div class="status "> <strong>0</strong> answers </div> </div> </div> <div class="summary"> <h3><a href="../../questions/45263100/pace-progress-bar-only-works-on-tab-container-refresh" class="question-hyperlink">Pace progress bar only works on tab container refresh</a></h3> <div class="excerpt">My jquery tabs container has an iframe in each tab. On page refresh, the User's previously selected tab and iframe load up nicely. The iframes in the other tabs load up only when their tab is selected. The problem is that while the Pace progress…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/jquery" class="post-tag grid--cell" title="show questions tagged 'jquery'" rel="tag">jquery</a> <a href="../../questions/tagged/tabs" class="post-tag grid--cell" title="show questions tagged 'tabs'" rel="tag">tabs</a> <a href="../../questions/tagged/pace" class="post-tag grid--cell" title="show questions tagged 'pace'" rel="tag">pace</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Jul 23 '17 at 08:35">asked Jul 23 '17 at 08:35</time> <a href="../../users/7098722/silverburch" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/7098722.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Silverburch" /> </a> <div class="s-user-card--info"> <a href="../../users/7098722/silverburch" class="s-user-card--link">Silverburch</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">457</li> <li class="s-award-bling s-award-bling__gold" title="2 gold badges">2</li> <li class="s-award-bling s-award-bling__silver" title="12 silver badges">12</li> <li class="s-award-bling s-award-bling__bronze" title="28 bronze badges">28</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-43942694"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>1</strong></span> <div class="viewcount">vote</div> </div> </div> <div class="status "> <strong>0</strong> answers </div> </div> </div> <div class="summary"> <h3><a href="../../questions/43942694/how-to-implement-pace-with-asp-net-mvc-applications" class="question-hyperlink">How to implement Pace with ASP.Net MVC applications</a></h3> <div class="excerpt">I have implemented pace.js with my ASP.NEt application so that I can display loading while my program performs ajax calls. I have the following in my main layout view: <script data-pace-options='{ "ajax": true, "elements": false, "document": false…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/asp.net" class="post-tag grid--cell" title="show questions tagged 'asp.net'" rel="tag">asp.net</a> <a href="../../questions/tagged/ajax" class="post-tag grid--cell" title="show questions tagged 'ajax'" rel="tag">ajax</a> <a href="../../questions/tagged/asp.net-mvc" class="post-tag grid--cell" title="show questions tagged 'asp.net-mvc'" rel="tag">asp.net-mvc</a> <a href="../../questions/tagged/pace" class="post-tag grid--cell" title="show questions tagged 'pace'" rel="tag">pace</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked May 12 '17 at 16:42">asked May 12 '17 at 16:42</time> <a href="../../users/2111515/barry-michael-doyle" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/2111515.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Barry Michael Doyle" /> </a> <div class="s-user-card--info"> <a href="../../users/2111515/barry-michael-doyle" class="s-user-card--link">Barry Michael Doyle</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">9,333</li> <li class="s-award-bling s-award-bling__gold" title="30 gold badges">30</li> <li class="s-award-bling s-award-bling__silver" title="83 silver badges">83</li> <li class="s-award-bling s-award-bling__bronze" title="143 bronze badges">143</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-43472193"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>1</strong></span> <div class="viewcount">vote</div> </div> </div> <div class="status answered-accepted"> <strong>1</strong> answer </div> </div> </div> <div class="summary"> <h3><a href="../../questions/43472193/how-to-show-pace-js-progress-of-page-load-in-td-tag" class="question-hyperlink">How to show pace.js progress of page load in td tag</a></h3> <div class="excerpt">I do have a requirement to show the pace.js progress on page load in td tag rather showing on the middle of webpage. My HTML : <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.js"/> <link rel="stylesheet"…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/jquery" class="post-tag grid--cell" title="show questions tagged 'jquery'" rel="tag">jquery</a> <a href="../../questions/tagged/html" class="post-tag grid--cell" title="show questions tagged 'html'" rel="tag">html</a> <a href="../../questions/tagged/pace" class="post-tag grid--cell" title="show questions tagged 'pace'" rel="tag">pace</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Apr 18 '17 at 12:29">asked Apr 18 '17 at 12:29</time> <a href="../../users/3405980/harshavmb" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/3405980.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="harshavmb" /> </a> <div class="s-user-card--info"> <a href="../../users/3405980/harshavmb" class="s-user-card--link">harshavmb</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">3,404</li> <li class="s-award-bling s-award-bling__gold" title="3 gold badges">3</li> <li class="s-award-bling s-award-bling__silver" title="21 silver badges">21</li> <li class="s-award-bling s-award-bling__bronze" title="55 bronze badges">55</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-38423746"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>1</strong></span> <div class="viewcount">vote</div> </div> </div> <div class="status "> <strong>0</strong> answers </div> </div> </div> <div class="summary"> <h3><a href="../../questions/38423746/using-pace-loading-progress-bar-in-asp-net-webform" class="question-hyperlink">using pace loading progress bar in asp.net webform</a></h3> <div class="excerpt">i use the following code in my asp.net web form for display pace progress bar. but it count until 99 percent and then stop. it works with html page but not aspx pages. can any body help me? <head runat="server"> <title>
mojtaba sabet
  • 47
  • 1
  • 7
1
vote
3 answers

How to track razor ajax form with pace.js

I'm trying to learn how to use pace.js with my Razor ajax form. The form returns a Partial View. According to their documentation, there is no need for configuration as it monitors all ajax requests (longer than 500ms). I have the following ajax…
usr4896260
  • 1,427
  • 3
  • 27
  • 50
1
vote
0 answers

Pace.js using dropdown list box

is it possible where we can able to use the pace.js while I'm clicking the items in drop down list box is this is possible
Pavithran
  • 75
  • 1
  • 7
1
vote
1 answer

Use Pace.js to track dynamically loaded script

I am using pjax standalone and pace.js to show page load progress. All working well. However I have one script I’m loading dynamically following a button click that’s pretty large (houndify-web-sdk.min.js 700kb) and would like to show the progress…
Stuart
  • 83
  • 1
  • 1
  • 8
1
2