[{"data":1,"prerenderedAt":290},["ShallowReactive",2],{"project-7196744":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":10,"maker":11,"posted_at":12,"year":13,"points":14,"comments":15,"rank_in_year":16,"shown_in_year":17,"top":18,"tier":19,"category":20,"subcategory":21,"format":22,"keywords":23,"reception":28,"sentiment":29,"stance_mix":30,"scored_comments":35,"aspects":36,"strip":42,"post_text":44,"what":45,"said":70,"maker_in_thread":150,"shape":162,"grid":167,"attempts":251,"same_week":252,"maker_shows":34,"maker_hidden":282,"reader_version":283,"card":284},"7196744","progre c ss","progre(c)ss","title","Show HN: progre(c)ss","http:\u002F\u002Fjh3y.github.io\u002Fprogre-c-ss","jh3y.github.io","codez",1391788010,2014,60,39,530,2272,24,"notable","languages","css library","library",[24,25,26,27],"css progress bar","pure css","progress indicator","jquery progress","mixed",0.035,{"positive":31,"neutral":32,"mixed":33,"critical":34},4,5,1,2,12,{"execution":37,"idea":39,"design":40,"docs":41},{"positive":33,"critical":38},0,{"positive":38,"critical":38},{"positive":33,"critical":33},{"positive":38,"critical":33},[43,38,43,38,38,38,38,38,38,38,43,38,43,38,32,38,33,38,43,38,38,38,38,33,38,32,38,43,38,38,32,38,38,32,38,38,38,38,38],3,null,{"problem":46,"audience":44,"pricing":44,"motivation":44,"time_to_build":44,"stack":56,"openness":69,"stage":69,"team_size":69},{"value":47,"source":48,"evidence":49},"Adding progress bars to elements without extra markup or JavaScript","maker",[50,53],{"id":51,"by":11,"text":52},"7196893","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.",{"id":54,"by":11,"text":55},"7197238","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…",[57,63],{"value":58,"source":48,"evidence":59},"CSS",[60],{"id":61,"by":11,"text":62},"7197206","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…",{"value":64,"source":48,"evidence":65},"Sass",[66],{"id":67,"by":11,"text":68},"7197995","added sass version.","unknown",{"praise":71,"objections":94,"requests":116,"questions":127,"alternatives":135},[72,83],{"value":73,"source":74,"evidence":75},"Simple to add to existing elements without changing design","commenter",[76,80],{"id":77,"by":78,"text":79},"7196947","gberger","Oh, indeed, that's definitely an improvement. Didn't realize I could put the 'progrecss' on any element.",{"id":81,"by":11,"text":82},"7196971","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.…",{"value":84,"source":74,"evidence":85},"Useful pure CSS approach",[86,90],{"id":87,"by":88,"text":89},"7198273","Ryel","Sweeet, I like it!",{"id":91,"by":92,"text":93},"7197300","lobster_johnson","I like it. Any chance of a SASS (ie., SCSS) version?",[95,102,109],{"value":96,"source":74,"evidence":97},"Setup instructions unclear; missed the data attribute step",[98],{"id":99,"by":100,"text":101},"7196854","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…",{"value":103,"source":74,"evidence":104},"Requires a percentage to be set, unlike nprogress",[105],{"id":106,"by":107,"text":108},"7197163","wololo_","nprogress is still better since you don't need to define a %. Instead it slowly advances automatically until you call .done()",{"value":110,"source":74,"evidence":111},"Conflicts with elements already using pseudo-elements",[112],{"id":113,"by":114,"text":115},"7197382","ultimatedelman","what if your element is already using its pseudo-elements?",[117,121],{"value":118,"source":74,"evidence":119},"Sass\u002FSCSS version",[120],{"id":91,"by":92,"text":93},{"value":122,"source":74,"evidence":123},"JavaScript helper to start and stop progress",[124],{"id":125,"by":92,"text":126},"7197453","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:…",[128],{"value":129,"source":74,"evidence":130},"How to update the progress value with JavaScript",[131],{"id":132,"by":133,"text":134},"7196858","sergiotapia","So you would need to update ``` data-progrecss=\"X\" ``` using JS or whatever at each \"progress step\" update.",[136,140],{"value":137,"source":74,"evidence":138},"nprogress",[139],{"id":106,"by":107,"text":108},{"value":141,"source":74,"evidence":142},"PACE",[143,147],{"id":144,"by":145,"text":146},"7198423","sfeng","It _is_ possible http:\u002F\u002Fgithub.hubspot.com\u002Fpace\u002Fdocs\u002Fwelcome",{"id":148,"by":145,"text":149},"7198433","PACE just does it all automatically: http:\u002F\u002Fgithub.hubspot.com\u002Fpace\u002Fdocs\u002Fwelcome",{"comments":151,"answered":43,"key":152},19,[153,156,159],{"id":154,"text":155},"7196887","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…",{"id":157,"text":158},"7196979","Sorry, my bad, that is correct. Thanks!",{"id":160,"text":161},"7197560","Thanks for this saraid216 :) It's always good to know things like this. Thanks again!",{"commenters":163,"max_depth":164,"maker_replies":151,"first_comment_mins":165,"lifespan_hours":166},13,6,16,26,[168,170,172,175,177,181,185,186,188,190,193,196,198,201,203,204,205,207,209,211,214,216,219,222,224,227,229,231,233,235,237,240,242,244,245,247,248,249,250],[132,38,43,169,133,38],"project\u002Fneutral\u002Fexecution",[154,38,38,171,11,33],"maker\u002Fneutral\u002Fdocs",[173,38,43,174,78,38],"7196952","maker\u002Fneutral\u002Fexecution",[157,38,38,176,11,33],"maker\u002Fpositive\u002Fnone",[178,38,38,179,180,38],"7197441","commenter\u002Fneutral\u002Fexecution","crescentfresh",[182,38,38,183,184,38],"7197468","commenter\u002Fneutral\u002Fperformance","saraid216",[160,38,38,176,11,33],[187,38,38,179,180,38],"7197936",[189,38,38,179,11,33],"7197499",[191,38,38,179,192,38],"7199484","Rajiv_N",[194,38,43,169,195,38],"7197053","woogley",[197,38,38,176,11,33],"7197069",[199,33,43,200,78,38],"7196882","project\u002Fneutral\u002Fidea",[51,33,38,202,11,33],"project\u002Fpositive\u002Fdesign",[77,33,32,202,78,38],[81,33,38,202,11,33],[99,34,33,206,100,38],"project\u002Fcritical\u002Fdocs",[208,34,38,171,11,33],"7196917",[210,34,43,171,100,38],"7196995",[212,34,38,213,11,33],"7197054","maker\u002Fneutral\u002Fnone",[144,34,38,215,145,38],"other\u002Fneutral\u002Fidea",[217,34,38,218,11,33],"7198565","maker\u002Fneutral\u002Fidea",[220,34,38,221,100,38],"7201892","other\u002Fcritical\u002Fidea",[113,43,33,223,114,38],"project\u002Fcritical\u002Fdesign",[225,43,38,226,11,33],"7197430","maker\u002Fneutral\u002Fdesign",[91,31,32,228,92,38],"project\u002Fpositive\u002Fnone",[230,31,38,171,11,33],"7197358",[125,31,43,232,92,38],"project\u002Fmixed\u002Fdocs",[234,31,38,176,11,33],"7197489",[67,31,38,236,11,33],"project\u002Fpositive\u002Fexecution",[238,31,32,239,92,38],"7198058","maker\u002Fpositive\u002Fexecution",[241,31,38,213,11,33],"7198096",[243,31,38,169,11,33],"7197437",[87,32,32,228,88,38],[246,32,38,213,11,33],"7198301",[106,164,38,221,107,38],[61,164,38,218,11,33],[54,164,38,218,11,33],[148,164,38,221,145,38],[],[253,257,262,267,272,277],{"id":254,"name":255,"points":256,"category":20},"7201353","InstantClick",426,{"id":258,"name":259,"points":260,"category":261},"7224436","Siri-as-a-Service Speech API",242,"ai",{"id":263,"name":264,"points":265,"category":266},"7191187","Eliss Infinity",214,"games",{"id":268,"name":269,"points":270,"category":271},"7188119","Hacker News Hack",149,"consumer_social",{"id":273,"name":274,"points":275,"category":276},"7200043","Automatic VPN Generator",125,"security_privacy",{"id":278,"name":279,"points":280,"category":281},"7219025","Abacus",120,"web_saas",false,"v2",{"id":285,"name":5,"line":6,"ai":282,"cat":20,"year":13,"points":14,"comments":15,"rec":28,"s":286,"top":18,"kw":287,"maker":11,"domain":10,"tier":19,"attempts":38,"strip":288,"url":9,"mix":289,"praise":73,"objection":96,"sub":21},7196744,0.04,[24,25,26,27],"303000000030305010300001050300500500000",[31,32,33,34],1794036515376]