4 ms·
Making SVG Loading Spinners: An Interactive Guide
- atonse 3y agoOne of the best examples of this was animated drawings that either the verge or engadget used in their Xbox and PlayStation reviews a few years ago. I don’t know if anyone else remembers these. But these really complex drawings were all animated by using stroke length.
- ghoulishly 3y agoHaving trouble finding that, do you have a link?
- atonse 3y agoNo I tried looking for the post but couldn’t find it unfortunately.
- CharlesW 3y agoThis? https://www.polygon.com/a/xbox-one-review https://www.polygon.com/a/xbox-one-review Background: https://product.voxmedia.com/2013/11/25/5426880/polygon-feature-design-svg-animations-for-fun-and-profit https://product.voxmedia.com/2013/11/25/5426880/polygon-feat...
- atonse 3y agoYes!! Thank you!! I guess it was polygon.
- dylan604 3y agoI like how the settings from each of the interactive components feed into the next one
- Diti 3y agoDon’t forget to apply the correct ARIA role to it (`progressbar`) when you use it in your application. https://w3c.github.io/aria/#progressbar https://w3c.github.io/aria/#progressbar
- teddyh 3y agoAnimating graphics while loading were invented as a way to reassure the user that nothing was stalled, halted or crashed. Therefore, any loading graphic whose animation is not directly tied to the thing which is waited on (i.e. the loading of assets, the reticulating of splines, etc.) is fundamentally dishonest, and teaches users to distrust loading animations; that is, the reason they exist in the first place.
- pqdbr 3y agoSorry to disappoint you, but historically a majority of progress bars in UI have shown either fake progress or a huge jump between low and high % of completion.
- teddyh 3y agoI am well aware.
- nhinck2 3y agohttps://sims.fandom.com/wiki/Reticulating_splines https://sims.fandom.com/wiki/Reticulating_splines I honestly can't tell if you are joking.
- teddyh 3y agoI knowingly used the joke phrase as a stand-in for whatever processing one might have an animation for.