Nanobar.js – Lightweight progress bars | Hacker News Reader

Nanobar.js – Lightweight progress bars

nanobar.micronube.com

90 pointschbaud26 comments

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.

NProgress.js natively requires jQuery (1.8+). If you don't want to use jQuery as a dependency, there's a PR on github that uses CSS instead https://github.com/rstacruz/nprogress/pull/28

PR == pull request?

yes

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

or use the progress element. no library.

But, this one is nano size :-) I haven't seen how mobile browsers handle the progress element, but this visual is very well suited for showing background activity progress in mobile.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pr...

It isn't as small as it could be though. Check out progre(c)ss

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

You can easily do the same thing you always have. Just snag the JS file [1] or the minified version [2] from the github repo and drop it in your js folder.

[1] https://github.com/jacoborus/nanobar/blob/master/nanobar.js

[2] https://github.com/jacoborus/nanobar/blob/master/nanobar.min...

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 don't even get the text you're seeing... http://i.imgur.com/DxZDTAQ.png

I'm seeing this on lots of sites with Chrome. Usually a reload fixes it.

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 + "-".

Have we decided if this is a good pattern or an anti-pattern, yet?

Relevant

"Origin" https://news.ycombinator.com/item?id=5761898

"Usability Anti-Pattern?" https://news.ycombinator.com/item?id=6238482

"NProgress et al." https://news.ycombinator.com/item?id=6246183

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.

I've been using PACE for page loading bars (http://github.hubspot.com/pace/docs/welcome/), but will definitely check this out!

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.

If you want to try nanobar go here: http://osscdn.com/#/nanobar

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.

Looks great. Seems to work on mobile too.

If your website requires a progress bar, you are a failure.

Reply on news.ycombinator.com