codebyzach / pace Goto Github PK

Would be really helpful (although it's small) to have the CSS minified.

Since v0.4.8, pace is not loading in Firefox (23.0.1 on OS X). I have the following issue:
TypeError: Value does not implement interface XMLHttpRequest. (at line 231)

No need to say more I guess.. and yes. it's an MIT licence bla bla bla.. but still.. :/

Especially the Flash theme is an older version of nprogress.css with exactly the same color theme.. so why not at least mentioning it somewhere.. :/

https://github.com/HubSpot/pace/blob/master/themes/pace-theme-flash.css

Pace is breaking my webpage after upgrading to Chrome 30.

The error message is:
WebSocket connection to 'ws://crmv3.emeieme.com/socket.io/1/websocket/U30BuBH6JOHipg3Mx0Wp' failed: Error during WebSocket handshake: Sec-WebSocket-Protocol mismatch

If I disable pace, everything starts working again.
My page is http://crmv3.emeieme.com (inside the Chat tab)

I'm using 0.4.13

Is it supposed to detect ajax request by default? cuz it's not working when I use jQuery's $.get and $.getJSON requests

There is some trick to trigger some function on callback?
Like trigger some show content functionn after pacejs completes the loading progress!

Tks in advance!

In IE and Firefox (tested in IE11 and FF25) the trickle style changes don't get repainted properly. A repaint doesn't seem to occur at all during the main animation, only in the final jump to 100% when done. Chrome performs the repaint fine.

I had some success forcing IE to repaint by cycling the progress element through 'display: none', but can't work out a solution that works in Firefox.

Not working with backbone,

Error on line:

646: return Backbone.history.on('route', function(router, name) {

BTW what is the compatibility version of backbone?

Hello,

I was wondering if I can modify the CSS somehow so that it shows a blury/opacity background till the bar loads 100% and disappears.

Doable?

Cheers!
Gurdeep.

hi,

first: nice lib and great work. Second: sorry i could not figure out how to only show the progress bar on ajax requests? i dont want to show it on every page load.

thanx

I get this error:
Uncaught TypeError: Cannot read property 'firstChild' of null

On line 136:
if (targetElement.firstChild != null) {

By default targetElement is supposed to be the 'body' tag. However, the querySelector lookup for 'body' comes back as null only if the pace.js file is included before the rails turbolinks.js. If I switch the order then it works fine.

This isn't too big of a deal for me but it did take a bit of time to figure out what was the cause of the error.

It would be nice to have themes.

One would be the current solid bar with the blur peg. (Like nprogress.)

Another would be a MacOS-esque ribbed bar like that mentioned in Faster Progress Bars: Manipulating Perceived Duration with Visual Augmentations. (@zackbloom I'm still working on the styles for this.)

Hello,

it seems that the plugin doesn't detect Backbone's ajax requests, as I'm trying to use it on a Backbone app and it doesn't appear (apart from the dom first load)

Any advice about how to fix it?

Thanks

Just by adding pace.js to the head section you get a nice error:

Using IE9. All other plugins working Ok. Jquery, Bootstrap, etc...

Hi,

Is this compatible with Turbolinks?

At the documentation:

Pace will automatically monitor your ajax requests, event loop lag,
document ready state, and elements on your page to decide the progress.
On ajax navigation it will begin again!

It should display the progress on every Ajax request, or not? If yes, does Pace need some extra configuration to work correctly with $.ajax?

After the page is loaded and the Pace progress is hidden, no matter how many ajax requests the page do, the progress only appears again when i manually call the Pace.restart() method before an ajax request, and even if I put a sleep(10) in the PHP, to delay it, the progress will appear and hide immediately

Sorry for my poor english.

i'm using a spa app where most of the long-loading stuff happens once at the initial load of the app. (see gmail.com for an example). like gmail, it shows a loading graphic during that initial load but never does again. this is what i'd like to happen.

i've modified the code locally, in a very quick and very dirty way, to have a parameter on the stop() function. it just then sets a global variable to true.

so for example,

var paceStopForever = false;

Pace.stop = function (forever) {
if (forever) { paceStopForever = true; }
...
};

then in the start() and go() routines i just check for that variable:

Pace.go = function () {
if (paceStopForever) return null;
...
};

Pace.start = function () {
if (paceStopForever) return null;
...
}

it's a terrible way to do it, i know, but it works.

would be great to include it in the actual code.

thanks for a great product!

• eric

here is my config:

  paceOptions = {
    target:'.pace-loading',
    ajax: false,
    document: true,
    eventLag: true,
    elements: {
      selectors: ['img']
    }
  };

causes all ajax request to not fire.

  paceOptions = {
    target:'.pace-loading',
    ajax: true,
    document: true,
    eventLag: true,
    elements: {
      selectors: ['img']
    }
  };

also causes all ajax request to not fire.

As it stands, Pace is designed to only show up on what would be called a 'page load'. Either the initial load, or ajax-y navigation.

It would be good if there was a way to make it appear when an arbitrary request is made.

Currently there is an issue with pace.js, require.js and legacy browsers that are not supported.

The problem is that pace is activated automatically after its loaded. That means that if we are using require.js, then there is no "clean" way to turn pace off (or to exclude it from loading) for legacy browsers that are not supported (ie7 for example). Especially so when one is replacing requirejs with almond during the compile step.

To avoid issues like that, then It would be nice to have an option to turn off pace completely.

I'm noticing that most of the time Pace decided to start the loader on the top of the page, gets maybe 30% of the way there, then disappears. Even if it only gets to a progress of 30 and completes, shouldn't it animate to width 100% then fade out? (like Youtube's, nProgress and Skylo's implementation).

Is this a setting of the theme, or is this part of pace?

Hello. I am using flash effect on my site, but when browser is loaded and refresh button appeared, PACE is still showing that it is loading. No ajax requests, dust a delay.
How to remove it?
Reproduce: http://ru.artactivator.com/

Hi! I try few times this progress bar and I can't get the demo of bi counter working.
With the other themes (css files) it works, while with pace-theme-big-counter.css not, nothing is displayed.

What's the license of pace.js ? Please add a LICENSE file in github repo. So that users can know whether they can use it in commercial cases, etc. :-)

I used theme flash, and it is freezes in chromium but in firefox the progress bar is not incrementing only the pace-activity spinner is loading

First of all Pace is awesome, but I can't make it work in my web app because it is tracking all PubNub requests, so the bar always stay visible even with new Ajax requests.
I am using Ember.js and PubNub generally make a lot of requests for listen channels and other actions.
Some help over here! Thanks in advance.

how to stop pace on window load? and how do i start it on click?

$(function(){
    Pace.stop();
    Pace.options = {
  ajax: false, // disabled
  document: false, // disabled
  eventLag: false, // disabled
  elements: {
    selectors: ['body'],
  },
   restartOnRequestAfter: false,
   restartOnPushState: false
};
});



jQuery('.thumb').click(function(e){
    Pace.start();   
});

Hey there. I'm building an website where there are some examples of a chart library, and i've got a select object that will specify the chart type to show, and will load an iframe with it's type samples. I wish I could start Pace as soon as I change the chart type. Is there any way to do that?

Thanks in advance, and congrats for the great job done here!

When eventLag is true takes approx 1.5 - 3 seconds to complete the animation. When I set it false almost immediate. What could be causing this?

It seems not working when call jQuery ajax methods.

how does one speed up the process of the loading bar? or is it based entirely on the page load?

window.paceOptions = {
eventLag: false,
//document: false,
//elements: false,
ajax: false
};

when set the value of ajax is false appear error

This is the error:

WebSocket connection to 'ws://localhost:35729/livereload' failed: Error during WebSocket handshake: Sec-WebSocket-Protocol mismatch pace.js:285

Is there a way to exclude certain url patterns?

Hi,

I try to use pace in one AngularJS application, it seems not work at all.
It will freeze the browser or cause some Javascript error output to the console.

Go to http://www.websocket.org/echo.html , open network inspector (in Chrome/Safari/Opera) and then hit "Connect".
You'll see that a pending "Switching boards 101" will be pending forever. This will cause pace to not hide in a single-page webpage with websockets.

I hate to be that guy... but it would be cool if this worked on IE 10 - true cross browser solution for loading.

The load from top works but not so much the rest

Who came first?
The effects from this page: http://tympanus.net/Development/CreativeLoadingEffects/
or the effects in pace?
If the former, I recommend a mention.

Without too much diagnoses, my current app works with Turbolinks, and each page only loads the body component as it should.

Adding Pace to the site causes each navigation to fail and force a full page refresh:

Uncaught Error pace.js?body=1:3
b pace.js?body=1:3
a.getElement pace.js?body=1:3
a.destroy pace.js?body=1:3
Pace.stop pace.js?body=1:3
Pace.restart pace.js?body=1:3
x pace.js?body=1:3
window.history.replaceState.window.history.replaceState pace.js?body=1:3
rememberCurrentUrl turbolinks.js?body=1:167
initializeTurbolinks turbolinks.js?body=1:381
(anonymous function) turbolinks.js?body=1:410
(anonymous function) turbolinks.js?body=1:422

Hi,

i dont know if i miss something here, but can I specify where the loading indicator should appear? For example if I open a bootstrap-modal the loading, as i think, should appear inside of the modal. Sometimes you also want the loading to apear just right next to the button or in the button itself...

can you please tell us exactly how to embed this on a page?

Thanks for publishing such a cool idea. I'd really love to get this working, but I'm having trouble trying to get a simple demo going on JSBIN at this address: http://jsbin.com/obUHiX/6/

It shows the progress when the page initially loads just fine, but doesn't show when the AJAX request is initiated. This request calls a simple service I cooked up for testing, which simply returns the current date and time after a random delay:

https://github.com/toddwprice/ajaxfaker/blob/master/app.js

I've tested in Firefox 24, Chrome 29, and Safari 6, all with the same results. Any thoughts?

Hello,
We have just add Paceto twittstrap resources list
http://www.twittstrap.com/resources/details/pace
Under : Javascript
Regards

Hello!

I would like to see a flipping circle progress theme in the future like this one: iphonetemplates.com

Also, please point me to how can I make a page load progress fade out after the page is ready to go.

Sort of 1) one page for load progress with counter.. page loaded -- fade out 2) main page

Best Regards!

In IE 7 I get the error:

SCRIPT5009: 'JSON' is undefined
color.js, line 24 character 12960
SCRIPT438: Object doesn't support property or method 'querySelector'
pace.js, line 115 character 5

how can I disable on initial page load?

is it possible to show the progress bar, when i click a link to download a file until the download has finished?

For example, we want to disable all button elements when ajax is working.
I already check documentation and code but not help.