Loading spinner or infinite loading animations

Used when loading time is unknown. It can be default spinners, creative indeterminate indicators, animations showing that your app is “doing something” under the hood.

The last type of animations probably has less stressful for the user, as they try to explain why loading takes time:

Calculating Loading Icon by Hoang Nguyen

Creative indeterminate indicators can be related to the business and help support your brand voice (that’s very true for progress bars as well). What app do you think might use such loading animation?

LittlePin Spinner by Daniel Sofinet

Infinite indicators ask users to wait while something uploading or doing, but never specifies how long it will take. Historically, looped animations were used for this task. They could be pretty simple or very creative and adorable (for the first several minutes):

Loading cat by domaso. So cute!

Infinity by Eszter Balogh. Looks cool but probably I will not be happy to look on it forever…

As you see, nowadays loading animations are more art than just a system status UI element.

Skeleton screens

Skeleton screens provide incremental progress in loading the interface. You can imagine them as black pages (placeholders) with step-by-step loading of images, text and other content you might see on the page.

This term firstly appeared in the Luke Wroblewski article, mentioned already (Mobile Design Details: Avoid The Spinner, 2013). Luke advised using skeleton screens for a better loading experience. This idea was supported by other designers in the space and used in the UI of Facebook, LinkedIn, YouTube, Google Drive & others. Some really cool findings on the topic you can read at Bill Chung guide.

Just to give a real example. If you use web design tool Figma, you saw a progress bar on the top of the page with gradual loading of UI — firstly you see placeholders for projects, then available data there:

Figma UI

Simple or well-crafted?

Besides nice examples in this guide and design concepts on Dribbble, in most apps you will see a default or simple loader.

For some time, simplified loaders were recommended as best practice as they require less processing power (that’s true especially for web). It’s much easier to use default or open-sourced loading indicators and don’t spend designers’ time to make custom animation and developers’ time to implement it.

In the design community, I saw different views on using default loaders.

From one hand, default UI components suggested by the operating system, allow designers to make a better native design and get better UX. The users are familiar with native components and intuitively know how to use them and what the outcome will be.

Here is a handy example. iPhone owners know what to expect from platform-standard navigation controls, buttons or icons. We could guess, that when the user sees a default loading in some iOS app, the person might not even notice its existence and the waiting time.

From another hand, users could have negative previous experience with the default component, especially loader:

One more thing to mention, if an app uses the loading indicator of OS instead of a custom one, users are more likely to complain about the internet connection or physical device speed instead of performance of the app. — Yi Gu, Software Engineer at Quora.

I couldn’t find research around this discussion but that’s definitely something interesting to consider.

In any case, if you are working on the MVP (minimum viable product) or the first release of your side project, it’s more logical to use simple, default or open-source loading animation. Even the most creative loading animation won’t save your product if it doesn’t solve the real need.

A set of SCSS mixins for single element loaders and spinners, an open-source project.

Interesting enough, but in 2016–2019 we could see much more well-crafted loading animations. Attention to details, the growing maturity of design in the companies, better tech environment and аvailability of many animation tools — all that made system status UI elements more creative. If you scroll Dribbble, you could see dozens of inspiring loading shots, so it’s a way easier to design your own.

Even in our 5-person startup, we think about better UX and making our waiting experience more pleasant. Otherwise, our feedback tool can lose users. No one wants to lose users.

So how to make a loading animation?

Useful tools and Resources

If you've read so far, probably you’d love to make your first loading animation :) From the beginning of this guide, you might remember that our 3 seconds delay has been seen as a bug and our initial animation wasn’t good enough.

To avoid such a scenario, learn more about designing and implementing loading animations before you actually make them (obvious, right?).

On Designing…

On Developing…

Good luck with crafting the best ever user experience for your product!

And if you succeed on your way, please share your learnings with me.