Loading Spinner - UI Element

Loading spinners are UI elements that communicate visually that an operation is processing. It shows the loading state of an action, a section, or a page. Without a loading spinner, people might think that the page is frozen or inactive.

Loading spinners are used to avoid showing static or blank content. But, they should only be used in cases where the processing state can’t be indicated through a skeleton loading dialog. 

‍

‍

1. Determinate Loading Spinners

Determinate loading spinners are used in the context of quantifiable activities, and they show how much the operation has been completed and how long it will be fully completed. Use this whenever possible to communicate the status of an action. This way, users will know that the platform is still working and their action is in progress. 

‍

2. Indeterminate Loading Spinners

Indeterminate loading spinners are used when it is not possible to measure the time it takes to complete an operation. This type of loading spinner does not give users any indication of an ongoing activity, and watching the bar for too long might lead them to leave the platform. When enough data is available, subtly switching to a determinate loading spinner is recommended. 

‍

‍

Use loading spinners in cases when:

• When the data of a page or section is being processed and will soon be completed.
• When an action disrupts the interface for over one second.
• When an operation requires running in the background for more than one second. 

‍

• Show it as rarely as possible

Multiple loading spinners will decrease the user experience and annoy users, leading to them leaving the platform. So, try to build your website or application so that it will show the loading spinner as rarely as possible. 

For a better experience, give a visual estimation of the approximate time left. 

• Content

The content should explain clearly why users have to wait. Provide descriptive information regarding the process by displaying the action verb that initiated the loading spinner. If no action has been initiated, indicate the process in the background rather than using vague words. 

For example, use “Verifying” instead of “Loading”. 

• Make the waiting time more bearable

In UX design, it’s recommended to display the content wanted as soon as possible. But in cases when this can’t be achieved – while users wait, provide them with something else to be entertained by. For example, an animation, a short video, or other information that will distract them from waiting. 

• Positioning

Loading spinners should be positioned at the center of the page or section that is currently loading. If only one element is processing, the spinner should not block the interaction with the other elements on the interface.

‍

Our uinkits system is a Figma Design System and UI Kits that include UI components that allow you, as a UI UX designer, to create your design products as quickly as pressing a button. You can find loading spinners and everything you need to create the perfect product design in Figma – all in just a few clicks. All you have to do is take the UI design component you need, and you’re ready to use it in your designs!

So, get your uinkits package and start designing now!