3 ms·

The spinner on the page is definitely designed to pulse; it is segmented and each segment has varying contrast (via brightness) to create the illusion of rotati

by fwlr 4y ago

The spinner on the page is definitely designed to pulse; it is segmented and each segment has varying contrast (via brightness) to create the illusion of rotation. I don’t think segmentation alone is enough to justify pulsing rather than spinning. Compare for example two variants of a Font Awesome spinner: Spinning (correct) https://fontawesome.com/icons/loader?f=classic&s=solid&an=spin https://fontawesome.com/icons/loader?f=classic&s=solid&an=sp... vs Pulsing (correct) https://fontawesome.com/icons/loader?f=classic&s=duotone&an=spin-pulse&sc=%231E3050 https://fontawesome.com/icons/loader?f=classic&s=duotone&an=... This other example is a little harder. Both spinning https://fontawesome.com/icons/spinner?f=classic&s=solid&an=spin https://fontawesome.com/icons/spinner?f=classic&s=solid&an=s... and pulsing https://fontawesome.com/icons/spinner?f=classic&s=solid&an=spin-pulse https://fontawesome.com/icons/spinner?f=classic&s=solid&an=s... seem slightly incorrect (though adding in visual contrast between segments makes pulsing seem much more correct: https://fontawesome.com/icons/spinner?f=classic&s=duotone&an=spin-pulse&sc=%231E3050 https://fontawesome.com/icons/spinner?f=classic&s=duotone&an...) And here is a a third spinner from FontAwesome that always looks correct spinning and never looks correct pulsing. Solid spinning (correct) https://fontawesome.com/icons/spinner-third?f=classic&s=solid&an=spin https://fontawesome.com/icons/spinner-third?f=classic&s=soli... / duotone spinning (correct) https://fontawesome.com/icons/spinner-third?f=classic&s=duotone&an=spin&sc=%231E3050 https://fontawesome.com/icons/spinner-third?f=classic&s=duot..., vs solid pulsing (incorrect) https://fontawesome.com/icons/spinner-third?f=classic&s=solid&an=spin-pulse https://fontawesome.com/icons/spinner-third?f=classic&s=soli... / duotone pulsing (incorrect) https://fontawesome.com/icons/spinner-third?f=classic&s=duotone&an=spin-pulse&sc=%231E3050 https://fontawesome.com/icons/spinner-third?f=classic&s=duot... My conclusion is that it’s clear that pulsing is sometimes much more correct than spinning, but it depends on the icon you’re using, it’s not as simple as “it’s segmented” or even “it’s segmented and the segments have visually contrasting brightness”. My advice would be “Although they are called spinners, spinning may not be the best animation for them, there is also pulsing to consider. Whenever you pick a loading animation, compare ‘spinning’ to ‘pulsing’ to see which one looks more correct.”

fwlr 4y ago
To add on to this, it can in fact be much more complicated than both styles put together and still look correct if done well. If you’re on iOS Safari, try scrolling to the top and then slowly pulling the page down (the universal iOS Safari gesture for refreshing). It starts out not spinning and each segment fades in to full opacity one by one, creating an impression of the spinner “filling up” as you get closer to completing the gesture. The moment you complete the gesture, the fully solid spinner starts spinning, then the spinning slows while some of the segments start fading, and the fade starts pulsing as well. By the time the spinning has stopped, the pulsing is in full effect. When the action completes, all segments quickly return to full opacity and the spinner quickly begins spinning once again, and then (while spinning) the whole icon both fades and shrinks until it disappears. That is an incredibly complex and incredibly well-executed spinner animation!

by fwlr 4y ago

fwlr 4y ago

To add on to this, it can in fact be much more complicated than both styles put together and still look correct if done well. If you’re on iOS Safari, try scrolling to the top and then slowly pulling the page down (the universal iOS Safari gesture for refreshing). It starts out not spinning and each segment fades in to full opacity one by one, creating an impression of the spinner “filling up” as you get closer to completing the gesture. The moment you complete the gesture, the fully solid spinner starts spinning, then the spinning slows while some of the segments start fading, and the fade starts pulsing as well. By the time the spinning has stopped, the pulsing is in full effect. When the action completes, all segments quickly return to full opacity and the spinner quickly begins spinning once again, and then (while spinning) the whole icon both fades and shrinks until it disappears. That is an incredibly complex and incredibly well-executed spinner animation!