A loading spinner is used to show the users that the system is processing and the content is being loaded.
Loading Variations
Default
Loading...
To load a whole page or a large amount of content. Recommended to use a loading label.
Inline
Loading...
Loading...
This may take a few seconds
To load content inside a small component. The size of the spinner follows the line height of the text.
Button Spinner
When the action being loaded is triggered by button click.
Guideline
• Use a loading spinner when the expected wait time is more than one second.
• There should only be a single spinner on a page at one time.
• If the loading is triggered by a button, use a button spinner which the spinner is inside the button and disable the button.
• Use a label with the spinner to describe what the system is currently doing. Use -ing verb as the label forma. Try to be as relevant as possible, such as “Submitting”, “Processing”, or use general wording such as “Loading”.
• Place the spinner on the center of the page with the spinner the only item on the page. No need to have modal