Waiting, Loading, Pending

Communication in the digital age leads to innovations in design and development of online systems. Developers measure successful online communication based on the speed and performance in seconds, kilobytes, frames per second, etc. Top companies of course are interested in the profitability of the increased technology and every web developer knows that loading symbols are necessary to keep the user on that site or application for longer than 3 seconds. Even with the advancements in technology, no one is a stranger to the loading animation, a digital animation designed to indicate activity between the server and the browser, improving the perception of performance. Commonly seen today as a circular clockwise or left-to-right horizontal motion, the animation indicates that the user must wait (often an undisclosed amount of time) for the content to load. Personally, I either roll my eyes, sigh loudly, or begin to fill with rage as each second passes, yet each technological innovation spoils us as complex web and digital applications load faster.

At the start of the Internet and America Online, we waited minutes, even hours, for pages to load and for content to upload or download. The original hourglass is my first memory with a loading symbol - the pixelated hourglass with pixel-grains of sand that flipped as you waited for the computer to process the action. The arrow cursor would transform into this hourglass which prevented the you from clicking on anything during the loading process. The hourglass loading animation is a simple reference to the physical object comprised of two glass bulbs with sand passing through a small connection between them and used to measure the passage of time. Once all the sand flowed to one end, the device was flipped to reuse and remeasure.

As technology advanced, the loading animations evolved.  There are still plenty of hourglasses tormenting users, but we see the widest variety among bars and circles now. The pinwheel for Apple users, the white rotating circle for Netflix watchers, and Google has dozens of primary colored options depending on the application you use. Why a circular motion or circle? Most likely the circular motion alludes to the same passage of time on a clock or revolution of a day. The loading animation began as an icon, a clear physical resemblance to the passage of time or waiting, but studies now show that an entertaining loading animation has the opportunity to keep the user engaged, thus increasing the likelihood of content comprehension. The first transition was to bars and horizontal lines most often read left to right - a comforting path for Western readers - it mimics our natural inclination of receiving visual and textual information. As loading animations became more prevalent in our daily lives, we see this icon transition further develop into a symbol.

Analogue Loaders by Raphael Vangelis

Analogue Loaders by Raphael Vangelis

“This collection, contains amongst other things, a variety of animated typography, countdowns and simplified SVG vector graphics to create light animations”   Behind the Scenes: Analogue Loaders. Raphael Vangelis

“This collection, contains amongst other things, a variety of animated typography, countdowns and simplified SVG vector graphics to create light animations”

Behind the Scenes: Analogue Loaders. Raphael Vangelis

Work, social life, and boredom all revolve around screens today, and the multitude of loading symbols invading my optic nerves at first seemed an oddly simple concept to discuss. Surprisingly, the fascination with this topic is not singular to me. Raphael Vangelis, a director of digital based animations in London created a short film, “Analogue Loaders,” that creatively captures the loading symbols of his daily life on a computer, as he states, “The result is an homage to all the lost time we collectively spend in digital limbo in the hopes of sudden development on our screen.” If you have 2:03 minutes to spare, it’s a playful interpretation of the digital symbols we hate to see.  After watching the behind the scenes video, Raphael not only shows you the process of creating this digitally designed, stop-motion, hand-crafted short. The vibrant colors, playful animation, and technical creativity keep one engaged as you quickly recognize to which company he alludes. The full list is in the still captured to the right, but during the behind the scenes video, Raphael is quick to disclaim that although he referenced well-known companies’ loading symbols, he did not wish to promote them. The video may be autobiographical, as Raphael appears in the short multiple times, but the idea is universal: Loading symbols are the frustrating bane of digital existence, so have fun with them.

Looking forward, some animation designers want to do just that. Through my hunt for loading animations, I discovered more loading symbol gifs than icons. I stumbled upon an entire world of creatively designed loading symbol animations, below are some of my favorites: