Loading Indicator

Learn more about loading indicators and UX design

When waiting for something to happen on a screen, designers use spinners, loading indicators, preloaders, or progress bars to reinforce that something is actually happening. No one likes to stare at a blank screen, after all.

One of the most important rules of UI/UX design is the visibility of system status; you want to let the user know at all times what is happening with the app. What’s more, you want them to know reasonably quickly -- don’t keep users guessing, but instead keep them consistently updated. Loading indicators are a solid means of keeping users apprised of their status -- whether it’s website loading animations or a spinner on a mobile app.

A paper from Jakob Nielsen in 1933 cites the three main reasons for providing a loading indicator for users. Number one, they reassure the user that the program or product has not crashed but is actually just working on a problem.

Second, loading indicators coupled with a type of progress indicator shows users approximately how long the expected wait time is. And finally, they provide something for the user to look at. Whether you’re staring at an Android loading spinner or an iOS loading indicator, at least you’re not staring at a blank screen.

What to look for in a loading indicator

Loading indicators should provide immediate feedback, letting the user know that your app needs more time to process whatever action the user is taking.

They should also estimate completion time for the action in progress. Spinners and loading indicators are reasonably informative, but the best progress bars and animations also give a sense of temporal progress for the user -- that feeling that time isn’t just passing idly, but that the app, site or program. This lowers user uncertainty about whether or not the app is working, and whether it’s working quickly enough for the user.

Also, good loading indicators give the user a reason to wait. Not only should the user not feel like their time is being wasted, but the loading indicator should be reasonably entertaining. No one’s asking for bells and whistles, but an engaging animation helps users pass the time while also being made aware of the paused status of the app.

What to avoid in a loading indicator

Unappealing animation or artwork.A page loading animation that offers supplemental information while users wait, or provides artwork that’s pleasing to the eye, is much better than a rote “Loading…” screen.

Overly specific time estimates. At the same time, you want to make sure the app doesn’t give the user incorrect information.

How to get started with loading animation in Framer

In Framer, you can find a ready-to-use loading indicator in the Insert Menu. Search for the Loading Indicator Default Component and insert it in your project. Once it is inserted there are a few different ways to use it. One of the most powerful features of the component in the built-in timeout function. Place the loading indicator in a frame, set the duration to Timeout, and use the connector to transition to a different frame on Timeout. You can also select the style of your loading indicator. In the properties panel next to Indicator, pick from Dots, iOS, or Material.