Member-only story
Understanding loading animations — types and applications
Do you feel comfortable and calm when opening Gmail, LinkedIn or other websites? Is there something to distract your attention and entertain your wait time? Do you think it provides the waiting reasons and the signal of time estimation?
Yes, the magics are loading animations.
What is the loading animation?
Users are inevitable to wait for a brief moment because of loading all the data and pages. In moments like that, the system needs something to hold the users’ attention and keep their patience for all the content to load.
Loading animation is to inform users about the wait time, reason and expectation on the status of ongoing processes, such as loading a website, submitting a form, or saving updates. It can provide an excellent distraction of attention to prevent impatience for a long time waiting. Moreover, it is a great time to emphasize branding and convey company voice.
So what kind of loading animations we can use in the design? Let’s take a short review.
Loading Animation Types
1. Progress indicators
A progress indicator is an element of a command-line interface, a textual user interface, or a graphical user interface that is intended to inform the user that an operation is in progress. In this article, they are categorized into different shapes, circular and linear.
(1) Circular progress indicator
Definition: Circular progress indicators display progress by animating an indicator along an invisible circular track in a clockwise direction. They are usually applied to the interfaces.
There are two types of animation: determine and indeterminate indicators.
Determinate indicators present how long a process will take. The process completion rate should be detected and shown when using them.
Indeterminate indicators show an uncertain amount of wait time. When progress can not be detectable, or no necessary to express the time of taking activities.
