Nanobar.js – Lightweight progress bars(nanobar.micronube.com)
nanobar.micronube.com
Nanobar.js – Lightweight progress bars
http://nanobar.micronube.com/
13 comments
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...
[1] https://github.com/jacoborus/nanobar/blob/master/nanobar.js
[2] https://github.com/jacoborus/nanobar/blob/master/nanobar.min...
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
"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 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.
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.
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);
If your website requires a progress bar, you are a failure.
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.
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.
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
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...
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've been using PACE for page loading bars (http://github.hubspot.com/pace/docs/welcome/), but will definitely check this out!
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
Does that assume my project is Node.js powered? I'm on Windows...