7 ms·
Show HN: progre(c)ss
- rpicard 13y agoI 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 13y agoSorry about that. I tried to make the page very minimal and probably sacrificed a little clarity in doing so ha.
- sfeng 13y agoIt _is_ possible http://github.hubspot.com/pace/docs/welcome http://github.hubspot.com/pace/docs/welcome
- codez 13y agoI 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 13y agoFrom 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 13y agoSo you would need to update data-progrecss="X" using JS or whatever at each "progress step" update.
- codez 13y agoYeah 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 13y agoIf using jQuery this would be better: $('.myprogrecss').data('progrecss', 60);
- codez 13y agoSorry, my bad, that is correct. Thanks!
- crescentfresh 13y agoI 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 13y agoGuessing, 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.
- gberger 13y agoSo, 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 13y agoThe 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 13y agoOh, indeed, that's definitely an improvement. Didn't realize I could put the 'progrecss' on any element.
- codez 13y agoYeah 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 13y ago[deleted]
- wololo_ 13y agonprogress is still better since you don't need to define a %. Instead it slowly advances automatically until you call .done()
- codez 13y agoAh 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 13y agoAlso, 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 13y agoPACE just does it all automatically: http://github.hubspot.com/pace/docs/welcome http://github.hubspot.com/pace/docs/welcome
- codez 13y agoI 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 13y agoI like it. Any chance of a SASS (ie., SCSS) version?
- codez 13y agoThanks 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 13y agoI 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 13y agoOk that's cool. I will look to add a helper and the SASS file. I've changed the sub heading ;) Thanks for this.
- codez 13y agoadded sass version.
- lobster_johnson 13y ago
- ultimatedelman 13y agowhat if your element is already using its pseudo-elements?
- codez 13y agoThat'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 13y agoSweeet, I like it!
- codez 13y agoHey Ryel! Thanks! I'm going to make a few little improvements to add some extra out the box features. Pass it around :) Thanks again