Skip to main content
Give us your valuable feedback

It will help us understand how we can serve you better

Give feedback



Option for your additional loading indicator



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.

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


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.


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

Alt text

Do : Visible indicator

Visible indicating users that their action is being processed

Alt text

Don't : Not visible indicator

The Indicator not visible for users know action is being processed


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.
Alt text

Do : With supporting text

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

Alt text

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