CSS throbbers – Part 2
First published on Ka of Isis 150503
My original intention for this series of articles on CSS throbbers (yes, there is a Part 1) was to go all the way to a part 4. To dive in and dissect the CSS that people have come up with to replace the trusted GIF animation with pure CSS. Then Bomo Art, for instance, could do away with the funny 11 KB loading animation that blends so well into the theme of their entire web site, conjuring up images of the work of Eadweard Muybridge and Victorian wall paper motifs…
…and replace it with a sharp fit-for-the-21st-Century throbber like the one below by Oskar Gustafsson. It is unavoidable, though, to see the irony in the resemblance of vectorian to Victorian.
Fig. At times, when the user changes the width of the browser window, the five strings attached to the Newton’s balls dissappear. I have not attempted to figure out why.
Gustafsson’s throbber is exuberant and imaginative and up front it does exactly what should be expected from a proper throbber: It tells us to “Please wait!”. Then I took a look at the code that goes into the making of the CSS animation. It is amazing what can be done with CSS code, but in the context of throbbers it becomes ridiculously cumbersome and long-winded, and serves more as a showcase for web developers. I will not repeat the code here but ask you to take a look at the web page source. To incorporate the Newton’s balls shown above, straight off the web page of the creator, the necessary HTML and CSS code runs to roughly 3 KB, not minified. It is possible to shave off bytes to minify download time and to do away with additional server requests for images etc etc etc, but life is too short for that.
Keep it simple
I did not have to boil my brain to come up with less daunting code and something equally fit for a graphical user interface. Martin Grubinger had already done that…
Fig. The only thing that differentiates the three throbbers above, is the width of the dashed border used. The thicker the border, the less perfect their distribution on the circumference of the circle becomes, but heck, it’s only a throbber! Different browsers will render the dashes differently, anyway. I only wish we could do away with vendor specific properties. Oh, well.
Demonstration
It is only appropriate to round off this discussion with a demo using another work by Eadweard Muybridge. He visited the Yosemite valley in 1872 and photographed what has become known as Pi-Wi-Ack or Vernal Fall. Helen Hunt Jackson, in Bits of Travel at Home (1878), wrote:
‘In the language of the Ah-wah-ne-chee, who always spoke truth, “Pi-wy-ack” means “white water” or “shower of shining crystals”, and “Yo-wi-he” means “the twisting” or “the meandering”. These were the names of the two great falls by which the Merced (River of Mercy) leaps into Ah-wah-ne. Then came the white men, liars; they called the upper fall “Nevada”, and the lower one “Vernal”; and the lies prevailed; being, as lies are apt to be, easier said than the truth.’
An editor’s note has been added to the statement above: ‘The correct Ahwahneechee name for Vernal Fall is Yan-o-pah. Pi-wy-ack refers to Tenaya Lake and was mistakenly transfered (sic) as the name for Vernal Fall.’
Be that as it may, but if you follow the demo link below, you will be taken to a separate web page displaying Muybridge’s picture as taken from the Google Art Project. The image is some 8 MB in size and should take a while to download – depending on your Internet connection and device, of course. Hopefully this will serve as a live example of the CSS throbber spinning while the image is loading into a placeholder. When the picture has been fully downloaded, the throbber should go away.