Spinner
A spinner is an animated spinning icon that lets users know content is being loaded.Usage
Spinners indicate that a system process is going on that will end with content being displayed to the user. They animate as soon as user action is initiated and disappear once the content appears.
Only show a spinner if the expected wait time is more than a second. There should only be a single spinner on a page at any time.
Accessibility
- Always use a
labelto add context for assistive technologies. Make sure the label accurately describes the type of process that's occurring. For example, "loading", "submitting", or "processing". - Spinners are an exception to reduced motion. We don't disable the spinner component because a frozen spinner can make it seem like the process has stopped.
Best practices
- If you want a spinner that is triggered by a button, use the
LoadingButtonexport from the button component. - When only a portion of a page is being updated, place the spinner in that part of the page.
- If you're unsure where to place the spinner, place it where you want the user's attention to be when loading is finished.
- When using a spinner directly over content, apply the
opacity.loadingtoken to the content container to de-emphasize the content and make the spinner more visible. See dynamic table loading states for an example.
Data Center apps
For all new features, we recommend using Atlassian Design System and other Atlaskit components, (opens new window). For existing code, you can continue to use Atlassian User Interface (AUI), (opens new window).
- When you want to show a spinner as an overlay on a button, use loading button.