Among with many important, useful, informative and inspirational daily newsletters I usually get, I’ve recently received one from InVision which, to be honest, is rarely I can call by one of the above. This time, however, the article The 8 most important UI animations of all time sparked my interest. I don’t really think this article, in particular, is the good collection of mentioned animations nor the justification was reasonable. For example, the very first blinking cursor isn’t an animation per se. It’s the same as blinking digits when you’re changing the time on your bedside clock (do people still use them?). It seems that most reasonable would be in this case the list of most annoying loading animations of all time, which I assume authors wanted to avoid in the sake of positivity. But it made me think about what could be the most annoying waiting/loading UI animation I can recall. It turns out a lot! Despite my rich experience working on Windows and macOS the most annoying would the beachball by Apple.
Its artistic value is questionable, to put it mildly. Its meaning, well… it could be anything from waiting a few seconds to permanent death of a computer. It’s super annoying! Unfortunately, we have a lot of loadings in our lives. Back in 2018 as part of my weekly routine, which is still lasting, I drew a comic strip on the theme of loading animation.
While there are a lot of places where you can get inspiration for the best UI animation and UX in general, UImovement.com is my best choice. And getting back to loading animation I really like when something that takes less but delivers something unique. The following example is done by Brant Holt on codepen.io the community I’ve mentioned before. This animation is done without any images or even Java, it’s done purely by CSS alone.
See the Pen CSS Planetary Gear Animation by Brant Holt (@brantholt) on CodePen.
Last but not least here is the great video by Raphael Vangelis I cannot but mention is about loading animation. Can you list all the mentioned loaders here?
