HN Explorer

41 comments

[ 3.4 ms ] story [ 96.5 ms ] thread
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.
codez
Sorry about that. I tried to make the page very minimal and probably sacrificed a little clarity in doing so ha.
rpicard
Nah, I probably have finished reading before going to the code. :)
sfeng
It _is_ possible 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!

rpicard
From what I see that requires JS as well. It just gives you a file to update it instead of having you do it.

I don't know a lot about the latest CSS features, but I don't think it's possible to have this with CSS alone.

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);
codez
Sorry, my bad, that is correct.

Thanks!

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.
codez
Thanks for this saraid216 :)

It's always good to know things like this.

Thanks again!

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.

codez
Yeah now this rings a bell I did have a go at using it like this before but the DOM didn't update as mentioned so I reverted to using it how I wrote above.

Thanks

Rajiv_N
I think jq's data methods allow you to store any type of object. So in the example above, '60' would be stored as a Number and not a String. When you extract it, you would get the Number and this helps if you want to do any math on the value.

Since you can't really set element attributes to non-string values, trying to sync the 'data' values with element attributes raises all sorts of unwanted problems.

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.

[deleted]
(comment deleted)
wololo_
nprogress is still better since you don't need to define a %. Instead it slowly advances automatically until you call .done()
codez
Ah right I hadn't seen this. From this line

"A nanoscopic progress bar. Featuring realistic trickle animations to convince your users that something is happening!"

You could do the same with progre(c)ss. And do it purely with CSS. Essentially that is what I am doing with the proge(c)ss bars on the page, I am using a keyframe animation and just setting different times on it.

Something like

       @keyframes progress {
           0% {width: 0%;}
           100% {width: 100%;}
       }
Then simply assign the animation to the :after element of a current progre(c)ss and there you have it without needing js.

Thanks for the heads up on nprogess, hadn't seen it before.

codez
Also, the main point of this is just to make a super simple CSS implementation that requires little JS to work.

Because on the js side you are still having to call a start function and a done function and whatever else you need which is the same as being able to do this with just CSS and then just doing a one liner in js that sets the attribute or adds a class.

Also with progre(c)ss you are only needing one file and people can quite easily change the attribute without having to load in a js file.

sfeng
PACE just does it all automatically: http://github.hubspot.com/pace/docs/welcome
[dead] 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!

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
Ok that's cool. I will look to add a helper and the SASS file.

I've changed the sub heading ;)

Thanks for this.

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.

codez
Just started taking a look at this.

Annoyingly, sass-convert no longer supports less so looks like I will have to have a little look at this to get a better version working.

Shouldn't take too long 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 :)

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