Spinner
Use Spinner to show users that an action is in progress.
On this page
On this page
Usage
A spinner is an indeterminate loading indicator, meaning it's best for cases where the progress or duration of a process is variable or unknown.
A spinner may be shown on it's own or paired with a loading message. Spinners may be used as a placeholder for loading content, or just as an indicator that some action is being processed.
More detailed guidance about designing for loading states can be found in our loading guidelines.
Options
Size
The size of the spinner can be adjusted. The medium (default) variant works best for most cases. The small variant is optimized for being displayed inline with loading text. The large variant works well for replacing entire regions or pages that are still loading.
Accessibility
By default, our spinner component provides a generic loading status announcement for assistive technologies. We recommend that you specify a custom announcement specific to your use-case. For example: "Loading changed files".
To avoid duplicate announcements when a loading message is already being displayed in context, the component allows engineers to suppress the spinner's default loading announcement.