Show HN: progre(c)ss

http://jh3y.github.io/progre-c-ss

by codez • 12 years ago

60 39 12 years ago

jh3y.github.io

rpicard3• 12 years ago

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.

codez19• 12 years ago

Sorry about that. I tried to make the page very minimal and probably sacrificed a little clarity in doing so ha.

rpicard3• 12 years ago

Nah, I probably have finished reading before going to the code. :)

sfeng2• 12 years ago

It _is_ possible http://github.hubspot.com/pace/docs/welcome

codez19• 12 years ago

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!

rpicard3• 12 years ago

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• 12 years ago

So you would need to update

    data-progrecss="X"

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

codez19• 12 years ago

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.

gberger3• 12 years ago

If using jQuery this would be better:

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

woogley• 12 years ago

You can also just set dataset[0] on the raw element:

    document.getElementById('myProgrecss').dataset.progrecss = '<PERCENT>';

[0]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement...

gberger3• 12 years ago

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%");

codez19• 12 years ago

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.

gberger3• 12 years ago

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

wololo_• 12 years ago

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

codez19• 12 years ago

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.

codez19• 12 years ago

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.

sfeng2• 12 years ago

PACE just does it all automatically: http://github.hubspot.com/pace/docs/welcome

lobster_johnson3• 12 years ago

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

codez19• 12 years ago

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_johnson3• 12 years ago

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.

codez19• 12 years ago

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• 12 years ago

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

codez19• 12 years ago

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• 12 years ago

Sweeet, I like it!

codez19• 12 years ago

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

Show HN: progre(c)ss

Related Stories