CSS throbbers – Part 1
First published on Ka of Isis 150407
Loders. Loader animations. Spinners. They go by many names, but calling them spinners is misleading in at least two departments. First of all, in the context of computing…
A spinner or numeric updown is a graphical control element with which a user may adjust a value in an adjoining text box by either clicking on an up or down arrow, or by holding an arrow down, causing the value in the text box to increase…
Secondly, they do not all spin. Some of them are more throbbing or pulsating – and throbbers are actually the official word for them. To save you the jump to Wikipedia, here is what is written:
A throbber is an animated graphical control element that visualizes that the program is performing an action in the background (such as downloading content, conducting intensive calculations or communicating with an external device). In contrast to a progress bar, a throbber does not convey how much of the action has been completed.
The infamous 1996 animation above (immaculately recreated by SLIM Laboratórios), supposedly told the user that the browser was busy at work. Like with most things Microsoft, they applied their not-invented-here philosophy to the logo in Internet Explorer, something which had already been eye candy in Mosaic and the Netscape browsers. When the latter was up for revision in 1995, the developers announced a public contest for a new logo animation, received more than a hundred submissions of which one with meteors streaking across a night sky was tweaked and used. Jamie Zawinski sheds some light on that history and confides that he had a different favourite:
A spin-off from the throbber is the decorative animation often seen on web pages. I do not know what it is with Americans and their obsession with super heroes but I do get the connection between a static comics illustration and the animated motion picture:
GIF animations have enjoyed a revival in later years, both in terms of quality and content. Cinemagraphs they are often called and photographer Jamie Beck and web designer Kevin Burg show us that the inherent maximum of only 256 colours is not necessarily a limitation:
Throbbers that make no sense
Fig. If you copy only one file in Windows, the animation above is illogical. And why do the copies disappear from the receiving folder?
Fig. ‘Ha, ha, fooled you there, didn’t we? Thought everything was ready? No, we just turn it around and then you’ll have to wait some more.’ Animation by yours truly; who cannot believe that he wasted the better part of a beautiful Sunday to recreate something as ugly as that Windows cursor!
A throbber that makes sense – sort of
Fig. Apple Computer didn’t quite cut it with the early Mac OS wristwatch cursor animation. While the minute hand spins freely, the hour hand is stuck at 9 o’clock. Please make a detour to a different article to check out my recreation of the cursor.
Throbbers that make sense
Fig. This spinning ball from Mac OS sends the correct message; “Please wait!”.
Fig. The old Mac OS idea done properly. This throbber from css-spinners.com is pure CSS; no image(s).
Fig. As it stands, this pure CSS throbber from signalvnoise.com only works in WebKit-based browsers like Safari and Chrome. Though not tested, given the right vendor-specific properties it should/might also work in different browsers.