Making SVG Loading Spinners: An Interactive Guide

[debesyla]

https://fffuel.co/svg-spinner/

[Diti]

Don’t forget to apply the correct ARIA role to it (`progressbar`) when you use it in your application.

https://w3c.github.io/aria/#progressbar

[atonse]

One 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 → atonse]

Having trouble finding that, do you have a link?

[atonse → ghoulishly]

No I tried looking for the post but couldn’t find it unfortunately.

[CharlesW → atonse]

This? https://www.polygon.com/a/xbox-one-review

Background: https://product.voxmedia.com/2013/11/25/5426880/polygon-feat...

[atonse → CharlesW]

Yes!! Thank you!! I guess it was polygon.

[teddyh]

Animating 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.

[nhinck2 → teddyh]

https://sims.fandom.com/wiki/Reticulating_splines

I honestly can't tell if you are joking.

[teddyh → nhinck2]

I knowingly used the joke phrase as a stand-in for whatever processing one might have an animation for.

[pqdbr → teddyh]

Sorry 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 → pqdbr]

I am well aware.

[dylan604]

I like how the settings from each of the interactive components feed into the next one