Spinner

Best practices

The spinner component should:

• Use to indicate that a page requested is loading.
• Use for indicating to users that their action is being processed.
• Use the label to provide a supporting text giving the user feedback about the current action.
• Use with a backdrop to prevent users from interacting with any underlying UI elements while the spinner is active.
• Never use spinners in buttons and with backdrops at the same time.
• As a rule of thumb, only use spinners on backdrops when waiting time exceeds 5 seconds, and instead choose button spinners for better contextual feedback on user actions.

Anatomy

1. Spinner
2. Spinner track
3. Label

Backdrops

• Use the default backdrop (semi-transparent dark) for states where the underlying UI can be exposed while the spinner is enabled.
• Use the default backdrop (semi-transparent dark) for states where the underlying UI needs to be unaccessible while the action is being handled.
• Use a solid white backdrop for situations where the user is transitioning between pages and the underlying content is either not available or should be hidden. E.g. the state after logging in to a product until the page and content loads.Responsive behaviour

Buttons

Use the button spinner for actions that don’t affect the rest of the UI and are limited to specific contexts. Consider the need to render related form fields disabled while a button spinner is active.

Content guidelines

The spinner label should aim to:

• Accurately explain the state of the requested action. For example, “Loading”, “Submitting”, “Processing”.
• Use as few words to describe the state as possible.