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.

References:

  1. Best Practices For Animated Progress Indicators
Last Updated: 6/12/2019, 11:53:27 AM