Spinner
Use spinners to let users know that content is being loaded and will take an indeterminate amount of time. There should only be one spinner on a page at time.
Size | Spinner | Example use case |
---|---|---|
Medium (default) | Use in place of or next to button. | |
Large | Use in content panels or when a large portion of the page is updating. |
Best practices
- If a spinner is triggered by a button, place the spinner in the button, and disable the button while the spinner is visible.
- 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.
- Only show a spinner if the expected wait time is more than a second.