When to use a spinner
- You have information that has a short load time, but takes more than a couple of seconds
- An action is being performed in the background and the main content is not immediately affected
- The loading time is uncertain or cannot be accurately determined
Behavior
Display the spinner immediately after a user action that requires processing, such as submitting a form or loading new content. If a process is taking too long, provide an option using a popover to cancel or retry, and inform the user of any errors that occur.
Best practices
Visibility is key
Place the spinner near the action it relates to so users understand what is loading. For example, if loading new content in a section, place the spinner within that section.
Provide context
If possible, provide a brief message along with the spinner to inform users about what is happening (IE: Loading data)
Limit duration
Ensure that spinners are not used for long loading times. If a process takes longer than a few seconds, consider using a progress bar or skeleton instead.