The Spinner is a loading indicator symbolised by a looped animation providing visual feedback about the system status when the UI or content is being downloaded
Do's
- make sure you have a message along with the loading indicator, such as "Loading"
- use an appropriate size depending on your need (e.g. Large for pool pages or large sections of a page, Medium for forms, Small for components)
Don'ts
- do not state the processing time if it cannot be reliably estimated
- do not use it more than once a page, unless it's part of components (small variant)
When to use
- the page/results will take more than 1 second to load
- when an action is performed by the user, to show an indication that their request is being handled
When not to use
- don't use if the delay is less than 1 second