Hacker News new | ask | show | jobs
by wololo_ 4513 days ago
nprogress is still better since you don't need to define a %. Instead it slowly advances automatically until you call .done()
3 comments

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.

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.

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