Spinner
A spinner is used to communicate a task that is ongoing and not yet complete. The spinner remains visible until the background task is complete and will then animate out with loaded content appearing in its place.
Props
Label
Label text for the component. Recommended: 1-2 words.
Description
Inclusion of supporting information.
Orientation
Layout of the component to support different placements.
Size
Visual impact of the spinner.
State
Indicator of status with loading.
Animation
Outline animates (draws) clockwise starting at the 12o’clock position, then draws out once it hits 360 degrees and repeats.
An optional animated check mark that confirms or acknowledges a guest’s actions.
Usage
Do
- When a guest’s action is processing and wait-time exceeds 3000ms
- When data from guest’s input is being saved or submitted
- If a guest’s action temporarily disables the application while processing occurs
- When the entire page is processing (one spinner centred in the screen is used)
- When a specific selection or action is processing (small inline spinner is used)
Don't
- When a page’s content loads progressively (in batches)
- When a new page or component is loading
