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. Loading indicators have everything to do with assurance for the user. A paper from Jakob Nielsen in 1933 sites 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 bar indicates approximately how long the expected wait time is. And finally, they provide something for the user to look at, again no blank screen.

How to use one 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.

Resources

Talk about this on Discord