
Show HN: progre(c)ss - codez
http://jh3y.github.io/progre-c-ss
======
sergiotapia
So you would need to update

    
    
        data-progrecss="X"
    

using JS or whatever at each "progress step" update.

~~~
codez
Yeah sorry if this piece is unclear, I could maybe add some more instruction
if that would help??

I wanted to make the demo page as minimalist as possible. Maybe I will just
add (using js) after step three.

But yes you can use js, something like

    
    
          $('.myprogrecss').attr('data-progrecss', <PERCENT>); (if using jQuery)
    

Or I believe

    
    
           Document.getElementById('myProgrecss').setAttribute('data-progrecss', <PERCENT>);
    

DISCLAIMER, this code just popped out of my head so it's probably not quite
correct but near abouts.

EDIT: I've added that little piece to the demo page.

~~~
gberger
If using jQuery this would be better:

    
    
        $('.myprogrecss').data('progrecss', 60);

~~~
crescentfresh
I don't believe $.fn.data is symmetric with respect to get and set. This will
update an in memory cache of "data-*" values only, leaving the corresponding
DOM attribute untouched.

I don't know why jq does this.

~~~
saraid216
Guessing, but it's probably because $.fn.data is meant as a storage mechanism,
not a DOM manipulation mechanism. Changing the DOM attribute would make it
just that tiny bit more expensive and you can already use $.fn.attr to do the
same thing.

~~~
crescentfresh
$.data is tightly bound to the DOM however - much of jQuery is, in order to
reduce developer friction - so this is just more jQuery api asymmetry IMO.

To your point, performance is noble goal. Having some asymmetry is no big
deal.

------
gberger
So, I'd have to do something like this to update it:

    
    
        $("#progress-bar").data("progrecss", 60);
    

Why should I use this lib when I can just roll my own and update it via:

    
    
        $("#progress-bar").css("width", "60%");

~~~
codez
The first one :)

The CSS makes use of `:after` to show the bar on whichever element you choose
meaning that we don't have to create extra progress elements etc.

~~~
gberger
Oh, indeed, that's definitely an improvement. Didn't realize I could put the
'progrecss' on any element.

~~~
codez
Yeah that's the angle I was going for with this so it's just super simple to
add it wherever you want it without having to worry about layouts etc. or
borking your elements.

Using :after means you don't even need to factor it as an element into your
existing design, you just place it on top.

------
rpicard
I spent way too long trying to figure out how the hell this CSS only bar knew
the current page progress. Missed step 3 on this page:

    
    
      add a data attribute data-progrecss defining the percent complete.

~~~
sfeng
It _is_ possible
[http://github.hubspot.com/pace/docs/welcome](http://github.hubspot.com/pace/docs/welcome)

~~~
codez
I appreciate bumping this link in a few places but I have some questions
regarding it.

If all you do is put a js file in and a theme file, how do you have control
over what element, the progress bar is on without having to write css to do so
and how do you say which requests to monitor and which ones to not? It seems
like having full control isn't quite there.

You could simply add an AJAX prefilter that has an update function within it
before making AJAX calls and that wouldn't be many lines of code at all and
means one less dependency.

Just my 2 cents.

Thanks for the heads up though!

------
ultimatedelman
what if your element is already using its pseudo-elements?

~~~
codez
That's a very good point.

I would have to say if your element is using both of it's pseudo elements,
this may not be the one for you or you may have to introduce another element
to use progre(c)ss.

My main scenario would be using it on a container element which in my use
cases rarely is using it's pseudo elements already but I can see how this
would be an issue.

Thanks for raising this :)

------
lobster_johnson
I like it. Any chance of a SASS (ie., SCSS) version?

~~~
codez
Thanks for the feedback lobster_johnson!

Yes, I'd be more than happy to provide a SASS version, I'll look into that,
hopefully this evening as it shouldn't be too long to make one at all.

Do you feel the documentation gets across what can be done with it clear
enough?

For instance, This doesn't need a js dependency but you could easily mock
progress using a keyframe animation on a particular progre(c)ss etc. I am
going to try and make some clearer docs and try add some feature attributes,
or classes.

I just want it to be clear to people that you can add it to existing elements
I think without changing design.

Thanks again for the feedback and I'll get a SASS file in as soon as I can.

~~~
lobster_johnson
I would definitely emphasize that it's pure CSS, because it wasn't obvious to
me when I looked. Instead of

    
    
        custom css progress bars with minimal effort!
    

you could write:

    
    
        Pure CSS progress bars with minimal effort!
    

(Yeah, the lack of capitalization looks a bit shoddy to me.)

Aside from that, it looks great. That said, I think a JavaScript helper to
complement it would be great; I am using NProgress in several apps, and I like
the fact that I can just start and stop it, and it will just do its thing.

~~~
codez
added sass version.

~~~
lobster_johnson
That was fast. Great! And thanks!

~~~
codez
No problem :)

I'll look into mocking stuff and adding the js helper.

Shouldn't take too much time I don't think.

------
Ryel
Sweeet, I like it!

~~~
codez
Hey Ryel!

Thanks!

I'm going to make a few little improvements to add some extra out the box
features.

Pass it around :)

Thanks again

------
wololo_
nprogress is still better since you don't need to define a %. Instead it
slowly advances automatically until you call .done()

~~~
sfeng
PACE just does it all automatically:
[http://github.hubspot.com/pace/docs/welcome](http://github.hubspot.com/pace/docs/welcome)

