[{"data":1,"prerenderedAt":217},["ShallowReactive",2],{"project-9257821":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":5,"maker":10,"posted_at":11,"year":12,"points":13,"comments":14,"rank_in_year":15,"shown_in_year":16,"top":17,"tier":18,"category":19,"subcategory":20,"format":21,"keywords":22,"reception":27,"sentiment":28,"stance_mix":29,"scored_comments":32,"aspects":33,"strip":39,"post_text":41,"what":42,"said":75,"maker_in_thread":136,"shape":138,"grid":142,"attempts":179,"same_week":180,"maker_shows":31,"maker_hidden":210,"reader_version":211,"card":212},"9257821","connoratherton.com","Performance-focused pure CSS loading animations","title","Show HN: Performance-focused pure CSS loading animations","http:\u002F\u002Fconnoratherton.com\u002Floaders","connoratherton",1427216372,2015,49,15,574,2565,23,"shown","dev_tools","css loading animations","web_app",[23,24,25,26],"css animation","loading spinner","pure css","css loader","debated",0,{"positive":30,"neutral":30,"mixed":31,"critical":30},3,1,10,{"execution":34,"performance":35,"idea":37,"design":38},{"positive":28,"critical":31},{"positive":28,"critical":36},2,{"positive":31,"critical":28},{"positive":31,"critical":28},[31,31,28,30,30,28,28,30,28,28,31,30,40,40,40],5,null,{"problem":43,"audience":57,"pricing":41,"motivation":41,"time_to_build":41,"stack":64,"openness":73,"stage":74,"team_size":73},{"value":44,"source":45,"evidence":46},"Provide loading indicators using only CSS instead of images","inferred",[47,49,53],{"id":48},"post",{"id":50,"by":51,"text":52},"9258204","syntheticcdo","These are pretty, however the demo page causes my Firefox to spin up to over 100% CPU utilization (obviously with hardware rending enabled). Why not just use a gif?",{"id":54,"by":55,"text":56},"9258245","deepuj","This is really nice, but wouldn't it be much more performance focused to simply use a gif?",{"value":58,"source":45,"evidence":59},"Web developers needing loading animations",[60],{"id":61,"by":62,"text":63},"9258897","exogen","I've made this before [1], here are at least a few reasons: - smoother than GIFs - GIFs don't have full alpha transparency - much easier to customize and adapt to different…",[65],{"value":66,"source":67,"evidence":68},"CSS","commenter",[69],{"id":70,"by":71,"text":72},"9260765","j4_james","As others have mentioned, most of these don't work on Firefox. For the few that I looked at, the only problem seemed to be a missing unit identifier on the animation delay. For a…","unknown","launched",{"praise":76,"objections":97,"requests":112,"questions":117,"alternatives":126},[77,89],{"value":78,"source":67,"evidence":79},"Pretty and stylish animations",[80,81,85],{"id":50,"by":51,"text":52},{"id":82,"by":83,"text":84},"9258001","sago","Very nice. A pair of red cherries if you can make pac-man chomp though!",{"id":86,"by":87,"text":88},"9259269","laumars","I think you could make similar arguments against the use of CSS. eg: - plays nicer on lower end hardware (I actually don't buy that CSS is smoother than GIF. I think it's 50\u002F50…",{"value":90,"source":67,"evidence":91},"Pac-Man example is cool",[92,96],{"id":93,"by":94,"text":95},"9260945","thomasfoster96","Oh wow - Pacman is pretty cool.",{"id":86,"by":87,"text":88},[98,103,107],{"value":99,"source":67,"evidence":100},"Many animations do not work in Firefox",[101,102],{"id":70,"by":71,"text":72},{"id":86,"by":87,"text":88},{"value":104,"source":67,"evidence":105},"Demo page causes high CPU usage",[106],{"id":50,"by":51,"text":52},{"value":108,"source":67,"evidence":109},"A GIF would be simpler or more performant",[110,111],{"id":50,"by":51,"text":52},{"id":54,"by":55,"text":56},[113],{"value":114,"source":67,"evidence":115},"Add a Pac-Man chomping animation with cherries",[116],{"id":82,"by":83,"text":84},[118],{"value":119,"source":67,"evidence":120},"Why not use SVG or GIF instead of CSS",[121,125],{"id":122,"by":123,"text":124},"9259127","Vektorweg","And why not SVG?",{"id":54,"by":55,"text":56},[127,132],{"value":128,"source":67,"evidence":129},"GIF animations",[130,131],{"id":50,"by":51,"text":52},{"id":54,"by":55,"text":56},{"value":133,"source":67,"evidence":134},"SVG animations",[135],{"id":122,"by":123,"text":124},{"comments":28,"answered":28,"key":137},[],{"commenters":139,"max_depth":140,"maker_replies":28,"first_comment_mins":141,"lifespan_hours":32},11,6,26,[143,145,147,149,151,153,157,159,161,163,165,166,168,173,175],[70,28,31,144,71,28],"project\u002Fcritical\u002Fexecution",[50,31,31,146,51,28],"project\u002Fcritical\u002Fperformance",[61,31,28,148,62,28],"commenter\u002Fneutral\u002Fidea",[122,31,30,150,123,28],"project\u002Fneutral\u002Fidea",[152,31,30,150,62,28],"9259257",[154,31,28,155,156,28],"9259803","commenter\u002Fneutral\u002Fnone","oxplot",[158,31,28,155,62,28],"9260045",[86,31,30,160,87,28],"project\u002Fmixed\u002Fperformance",[162,31,28,155,62,28],"9259285",[164,31,28,155,87,28],"9259337",[54,36,31,146,55,28],[82,30,30,167,83,28],"project\u002Fneutral\u002Fdesign",[169,170,40,171,172,28],"9259727",4,"project\u002Fpositive\u002Fidea","emranemran",[93,40,40,174,94,28],"project\u002Fpositive\u002Fdesign",[176,140,40,177,178,28],"9259219","maker\u002Fpositive\u002Fnone","fredkelly",[],[181,186,191,196,201,205],{"id":182,"name":183,"points":184,"category":185},"9249112","Rabbits",256,"web_saas",{"id":187,"name":188,"points":189,"category":190},"9262260","Fiddle.md",129,"productivity",{"id":192,"name":193,"points":194,"category":195},"9250493","Madeon's Adventure Machine",85,"creative",{"id":197,"name":198,"points":199,"category":200},"9243085","Firesize",58,"infrastructure",{"id":202,"name":203,"points":204,"category":190},"9233095","Stripe for Gmail",56,{"id":206,"name":207,"points":208,"category":209},"9235171","php-functional",46,"languages",false,"v2",{"id":213,"name":5,"line":6,"ai":210,"cat":19,"year":12,"points":13,"comments":14,"rec":27,"s":28,"top":17,"kw":214,"maker":10,"domain":5,"tier":18,"attempts":28,"strip":215,"url":9,"mix":216,"praise":78,"objection":99,"sub":20},9257821,[23,24,25,26],"110330030013555",[30,30,31,30],1794036529697]