Spinner Preview
Spinners visually communicate that something is processing. They’re used for loading states that take more than a second.
Spinners don’t show how much time is left before the process is done. To communicate a more specific status, try a determinate progress bar instead.
Resources
Layout
Spinners should be centered over the section of the page that’s loading. If only one section is loading, the spinner shouldn’t block interaction with other sections on the page.
Accessibility
If you know a process will take longer than three seconds, use a label with the spinner to let people know what’s happening in the background. The label text will be used in an aria-labelledby attribute and identified to screen readers.
Content
Be as specific as possible about what’s happening. If possible, reflect the action word that triggered the spinner.
If no action has been taken yet, describe the background process in clear terms. For example, “Connecting to data …” instead of “Working on it …”
If it’s not possible to be specific about what’s happening, avoid vague words, like “loading” or “authenticating.” Instead, use “Getting things ready …”
Use short, -ing verbs for spinner labels. Keep it brief—three words or less—and end with an ellipsis to communicate the process is ongoing. Use a space before the ellipsis.
Use sentence style capitalization—only capitalize the first word. For more info, see Capitalization in the Microsoft Writing Style Guide.