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.




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.

Whole page spinner


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.


Be as specific as possible about what’s happening. If possible, reflect the action word that triggered the spinner.

Button loading

If no action has been taken yet, describe the background process in clear terms. For example, “Connecting to data …” instead of “Working on it …”

Process description correct
Process description incorrect

If it’s not possible to be specific about what’s happening, avoid vague words, like “loading” or “authenticating.” Instead, use “Getting things ready …”

Less specific correct
Less specific incorrect

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.