27 comments

[ 3.2 ms ] story [ 66.7 ms ] thread
I think the page is not loading correctly?

http://i.imgur.com/l4EhSbn.png http://i.imgur.com/3PunOCp.png

JS and all that is enabled.

I think there's something funky with Chrome and font rendering. Reload the page and it should be fine
It's this:

https://code.google.com/p/chromium/issues/detail?id=336476

Google pretty much Broke The Web with Chrome 33. It shipped a bug that skips rendering Web Fonts until you force a DOM repaint. That means that roughly half the sites in existence will, from time time to time, load up with absolutely no visible text.

The fix will ship in a few weeks with Chrome 35. Until then, get used to refreshing a lot.

You can fix it faster by changing the font size, ie Ctrl + "+" then Ctrl + "-".
Looks great. Seems to work on mobile too.
For Angular there is http://chieffancypants.github.io/angular-loading-bar/, which adds a loading bar by intercepting the $http service. It works automatically. Just drop it in and you have a loading bar just like Nanobar.js
I very much enjoy using NProgress.js (http://ricostacruz.com/nprogress/). Very similar to this library, but with the added benefit of a random increment function that allows you to show progress without knowing the specific position.
IMO a lightweight progress bar requires no JS at all, especially jQuery as a dependency, that is overkill.

You can use a CSS only solution which will achieve the same thing like progre(c)ss. Or use the progress element as well.

Mmm... The bar stalls right in the middle. Latest stable Firefox (27.0.1).

  setTimeout(function(){
  	topito.go( 50 );
  }, 1000);
I think that's intended. I also use 27.0.1 and if you click the buttons the progress works fine.
Have we decided if this is a good pattern or an anti-pattern, yet?
I have to go off-topic to ask something serious. What has happened in the last months that you use something called npm or bower to intsall Javascript libraries, where in the old days I just downloaded them and dropped in my static/lib folder?

Does that assume my project is Node.js powered? I'm on Windows...

If your website requires a progress bar, you are a failure.
It took me several website clicks, comparing different versions, and a lot of work to even see where it was.

I had absolutely no idea what it was doing. I can't be the only one that isn't used to this function, and thus has no idea what's going on when you use one of these.