Spinner

Option for your additional loading indicator

Anatomy

Spinner component is used to indicate users that their action is being processed. You can customize the size and color of the spinner with the provided properties.

Track : a track that will be filled by the indicator either determinate or indeterminate way.
Indicator : is a circular element that will fill the invisible circular track with color, as the indicator spin 360 degrees.

Usage

Spinners are used to demonstrate data loading. Spinners are offered in different sizes that follow the sizing of our icons. These sizes include extra small, small, medium and large. Depending on the size of information you are loading and the space you are dealing with, we recommend using the spinner size that generally matches.

Common places spinner appear: Loading screen and else where when needed

When to use

Users know progress on their action in the UI is being made.
To keep users from giving up on an experience.
Especially after user input to prevent repeated action.

When not to use

Progress on a large task with steps users should complete.
For progress on a process out of their control.
Don’t use to show progress. Favor a progress bar instead.

Accessibility

When a change occurs in the UI, like a loading state, it’s good to notify a user what is happening. While a spinner visually indicates that a process is happening

Do : Visible indicator

Visible indicating users that their action is being processed

Don't : Not visible indicator

The Indicator not visible for users know action is being processed

Content

When creating spinner :

Only show a spinner if the expected wait time is more than a second.
If only a portion of a page is displaying new content or being updated, place the spinner in that part of the page.
If you are unsure where to place the spinner, place it where you want the user’s attention to be when loading is finished.
You can add supporting text to let the user know what is happening.

Do : With supporting text

Use the label property to provide an accessible label for the expectation information the action is being processed

Don't : With progress information

Use the label property to provide currently step or state is being processed to user, and the user can control the spinner