
Nanobar.js – Lightweight progress bars - chbaud
http://nanobar.micronube.com/
======
stillmotion
I very much enjoy using NProgress.js
([http://ricostacruz.com/nprogress/](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.

~~~
trekforever
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](https://github.com/rstacruz/nprogress/pull/28)

~~~
Zecc
PR == pull request?

~~~
elwell
yes

------
dreamdu5t
For Angular there is [http://chieffancypants.github.io/angular-loading-
bar/](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

~~~
camus2
or use the progress element. no library.

~~~
utopkara
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...](https://developer.mozilla.org/en-
US/docs/Web/HTML/Element/progress)

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

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

~~~
delluminatus
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](https://github.com/jacoborus/nanobar/blob/master/nanobar.js)

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

------
SquareWheel
I think the page is not loading correctly?

[http://i.imgur.com/l4EhSbn.png](http://i.imgur.com/l4EhSbn.png)
[http://i.imgur.com/3PunOCp.png](http://i.imgur.com/3PunOCp.png)

JS and all that is enabled.

~~~
kemayo
I don't even get the text you're seeing...
[http://i.imgur.com/DxZDTAQ.png](http://i.imgur.com/DxZDTAQ.png)

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

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

------
Bjoern
Relevant

"Origin"
[https://news.ycombinator.com/item?id=5761898](https://news.ycombinator.com/item?id=5761898)

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

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

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

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

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

------
jdorfman
If you want to try nanobar go here:
[http://osscdn.com/#/nanobar](http://osscdn.com/#/nanobar)

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

~~~
mmabbq

      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.

------
utopkara
Looks great. Seems to work on mobile too.

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

