A spinner indicates to the user the application is performing an action.
Example
Properties
| property | propType | required | default | description |
|---|---|---|---|---|
| hasOverlay | bool | - | - | boolean class for establish overlay |
| size | oneOf 'small' | 'tiny' | - | - | various sizes |
| testSection | string | - | - | Hook for automated JavaScript tests |
Usage
A spinner is used to help indicate to the user a process, usually initated by user selection, is in progress. Typically, only one spinner should be active at any time on any given page.
Placement
Spinners can be blocking (full-screen, or full-content area) or used inline.
When loading a new page, a blocking spinner is displayed with an overlay to prevent the user from interacting with the old page.
When performing a non-blocking action, like indicating the app is saving data or uploading a snippet, or the action takes longer than 1 minute, an inline spinner may be used.
Sizing
The spinner has a default size, a small size, and a tiny size. The default size is typically used to cover large sections, like a new page load, whereas the small and tiny sizes can be used inline, like showing the status of a particular step.
Best Practices
When loading multiple elements at the same time, consider using Progress Dots instead.
Do
Do use a spinner to show the user something is loading or in progress
Do use a spinner with an overlay to prevent the user from interacting with the underlying page
Don't
Don't use multiple spinners on one page, consider ProgressDots