

Show HN: ngProgress - slim, site-wide progressbar for AngularJS, without jQuery - diggan
http://victorbjelkholm.github.io/ngProgress/

======
diggan
This is a Angular provider I've created after seeing NProgress[1] but I didn't
want the jQuery dependency and I also wanted it for Angular so here it is.

Please comment if you see I'm doing something superstrange in the code or if
you have any suggestions. I'm eager for your feedback!

[1] [http://ricostacruz.com/nprogress/](http://ricostacruz.com/nprogress/)

------
wiradikusuma
Wow, this is cool. The first thing I thought when I saw
[http://ricostacruz.com/nprogress/](http://ricostacruz.com/nprogress/)
(submitted earlier) was how much effort to port/implement it to/in AngularJS.
And you did it!

Sorry for nitpicking: (1) I think the color is too strong, (2) At one time (I
don't know what I did), the progress bar went 50% but centered instead of
left-aligned (but still on top), unfortunately I can't reproduce it, and (3)
While trying to reproduce the bug, I encounter another bug where it won't stop
if I click "Start progressbar" repeatedly.

~~~
diggan
Thanks for the cooleness mention, always makes me smile! I thought the same
thing and started thinking about a port. Then I discovered that is was simpler
to just skip the jQuery part and use Javascript only instead.

1, you can use whatever color you want. Either you call progressbar.color()
with an HTML valid color or you use the provider like this:

    
    
        app.config(function(progressbarProvider){
            // Default color is firebrick
            progressbarProvider.setColor('firebrick');
            // Default height is 2px
            progressbarProvider.setHeight('2px');
        });
    

2, I will have to look into that

3, and the same with this bug

Thanks a lot for checking it out and telling valuable feedback!

------
gstar
One difference from yesterday's example is that it will get to 100% without
'complete' firing.

~~~
diggan
Yeah, I'm not sure that the progressbar should disapear just because the width
is 100% because the loading still can be unfinished. Therefore you should
always call progressbar.complete() after the loading is done.

Please let me know what you think would be best.

~~~
gstar
I think you missed a subtlety of nprogress, where it never fills the last 10
(or so) pixels unless complete is fired, presumably so that it doesn't make
you think loading is finished until it's really, really finished.

~~~
diggan
Oh, yes, I totally missed that and that seems very reasonable actually. I've
now changed (commit 34e3c16 [http://git.io/4MeJNg](http://git.io/4MeJNg)) so
the start-method will stop at 95% instead of stopping at 100%.

~~~
bib971
One technique that I used when building my own progress indicator is using a
maths function which approaches 0 as the progress bar approaches 100% and use
the result to increase the progress.

That way, the progress bar appears moving slower and slower but never actually
hits 100%. I think that's better than having the progress bar completely
stalled at 95%. See code here:
[https://github.com/buunguyen/rainbow.js/blob/master/src/rain...](https://github.com/buunguyen/rainbow.js/blob/master/src/rainbow.js#L97).

------
Foxandxss
Would be good to have a real-world example, like a progress for $http, or
loading data... I am trying to swap angular-app's spinner with this, but it
works with $http.pendingRequests (the less, the more advanced the progress
should be).

~~~
diggan
Hmm, I will work on some realworld examples, for sure. Mainly it's for faking
the progress so the user can see something instead of seeing nothing which
means you call progressbar.start() before the request and
progressbar.complete() when the request is done.

But I will for sure look into using ngProgress with $http and $resource to see
if I can make the swapping easier.

------
taude
Thank your for making a proper AngularJS directive and not just some shim-
wrapper for an existing JQuery component. I wish this was more the standard
than the exception with AngularJS components. Let's move foward!

~~~
diggan
Except it's not a directive but a provider! But thanks and I absolutely agree,
more ports to native Javascript instead of using jQuery in Angular!

------
jwblackwell
Wow....what are the odds of this! I literally just came on here to find the
site wide progess bar submitted earlier so I could implement it in angular and
this shows up! Thanks a lot!

~~~
diggan
Haha, not so small since this place is filled with smart people!

Thank you for checking it out!

------
emp_
I had a ton of trouble a few months ago to create a reliable global loading
indicator for all requests in Angular, this doesn't seem to implement that,
correct? One would have to explicitly call p.start() as the installation says,
I wonder if that global intercept is more doable nowadays?

There does exist a suggestion somewhere in the google groups (that later
became a gist/drop in directive) but with the new versions Ng IIRC it broke
and threw me off during my tests.

------
ConceitedCode
Has anyone figure out how to use this when switching between views?

~~~
diggan
Can you show how you are using the views? Are they directly in the body?

~~~
ConceitedCode
Similiar to the foodme example app
([https://github.com/IgorMinar/foodme/blob/master/app/js/app.j...](https://github.com/IgorMinar/foodme/blob/master/app/js/app.js)).

------
Foxandxss
Did anyone said awesome? Well, I will: Awesome.

~~~
jvandyke
Indeed! I saw this project yesterday and started wondering how I could get it
into an Angular app. Thanks for saving me the trouble!

~~~
diggan
Hehe, I was in the same situation and dedicated my night to replicate it into
a Angular provider.

------
jasdeepsingh
Dang! I was about to release something for AngularJS as per my comment
yesterday on NProgress.. You beat me to it! Great job!

~~~
diggan
Yeah, I'm eager to start using it in our application as soon as possible so
figured I needed to develop it as soon as possible!

Thanks!

------
nijiko
This would be easy to recreate without the need of Angular or jQuery...

~~~
bib971
In case you're interested, I built one that doesn't use Angular or jQuery:
[http://buunguyen.github.io/rainbow.js/](http://buunguyen.github.io/rainbow.js/)

~~~
platz
The most interesting thing for me about the frameworks is how they all use
different methods of rendering the bar itself.

So far I've seen straight css, canvas, and css transitions.

------
d0vs
Oh my God. I don't have the vocabulary to tell you how much this sickens me.
You don't have to do something just because Google does it. Focus on speed
instead of shitty non-features that lambda users will find misleading.

~~~
pachydermic
Sickens?

I think it's kinda cool... Not sure if I'd like to see it on every page from
now on, though.

~~~
diggan
Agree that it shouldn't be used on every website. I think the use case would
be when you are doing heavy processing or waiting for external resources. Not
like Medium is using it, when loading a new article with only text.

