Education STEM

Status, Progress and Micro Animations

With the ubiquitious broadband comes the ability to download, upload, and stream more data than ever before. While the wait for most mundane and typical tasks are greatly reduced over the past two decades coupled with advancement in hardware of devices, and more data being exchanged and processed every microsecond, the need for users to wait for certain tasks completions isn’t going away anytime soon. Faster processing times raises user-expectations and lowers their patience threshold. Waiting for 3 seconds can seem like a “hang” and can be frustrating and even confusing to users. One way to make that more meaningful and tolerable is to show visual progress to the users that clearly show that their commands are being processed. Many progress updates include animations along with percent completed and/or a visual meter or gauge. I won’t go into those type of progress meters and animations in this post.

Instead, I’ll share some of the “micro” animations that we encounter when we’re updating software, switching different applications, starting a service or stream, waiting on confirmation of an order or checking the status, or getting results back from our searches. These days, such animations are typically short, nevertheless, many designers have become quite creative with the visuals offering the users not just information but even a soothing or entertaining experience to make the wait less painful. Here are some of my hand-picked collections of various, very useful micro animations for progress that can be used across all industries and some being quite niche-oriented (e.g. food, drinks, tickets services). I did not create these, but wanted to share my fascination and admiration for such work with you all. These are culled from my hours of curating from all of the web from sources such as: giphy, awwwards, dribble, pinterest, codemyui, loadinfo dot net, etc. and various individual freelance artists who have shared their work for free in the afore-mentioned sites and on the Web (too many individuals to list here). Some of them have been modified by me to remove the progress numbers or too-specific information to make them generic, to reduce or optimize their sizes and remove redundant frames, and in many cases convert videos into GIF formats for each of including on any web page without special plugins.

The following animations are not implicit or explicit permissions to use them freely for your purposes. They are shared here solely for demonstration, exposure, and educational purposes. It is your responsibility to procure appropriate licensing and permissions directly from the creators for your specific purposes.

So, let’s see them!

ABCDE
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

That was an eye-ful! Do you have a favorite or a few favorites?

As you can see there’s a wide range of categories here. I would probably categorize my collection as follows…

Niche: e.g. food, travel, communication such as chat/email related.

Utilitarian: e.g. circles, cogs, wheels, hour-glass, primitive shapes that repeat.

Amusing: e.g. chicken laying an egg, jumping rope, running reindeer.

Mesmerizing: e.g. geometric shapes morphing, hypnotic movements.

If you’re a designer, hope these inspire you, if you’re a developer, look into CSS, Javascript and HTML for creating similar animations.



Interested in creating programmable, cool electronic gadgets? Give my newest book on Arduino a try: Hello Arduino!

Leave a Reply

Your email address will not be published. Required fields are marked *

Back To Top