Spinner
Spinner
Spinner
is a visual representation of a process taking an indeterminate time to complete. Triggers include automated system processes, a user action or an indicator of content loading. Displaying a spinner reassures the user that the system is still working, especially when the operation takes longer than one second.
The small spinner is used for embedding in individual components (e.g., button or input) that require dynamic loading experiences.
For the small size set the size
prop to "small"
.
You would typically use the medium spinner is typically used for widget loading experiences.
For the medium size, set the size
prop to ”medium”
or leave it as undefined
.
The large spinner is useful for full-screen loading experiences.
For the large size, set the size
prop to ”large”
.
Center the spinner in the middle of a page or content that's loading.
When updating only a portion of a page, position the spinner within that specific area.
The small spinner is used for embedding in individual components (e.g., button or input) that require dynamic loading experiences.
For the small size set the size
prop to "small"
.
You would typically use the medium spinner is typically used for widget loading experiences.
For the medium size, set the size
prop to ”medium”
or leave it as undefined
.
The large spinner is useful for full-screen loading experiences.
For the large size, set the size
prop to ”large”
.
Center the spinner in the middle of a page or content that's loading.
When updating only a portion of a page, position the spinner within that specific area.
The small spinner is used for embedding in individual components (e.g., button or input) that require dynamic loading experiences.
For the small size set the size
prop to "small"
.
You would typically use the medium spinner is typically used for widget loading experiences.
For the medium size, set the size
prop to ”medium”
or leave it as undefined
.
The large spinner is useful for full-screen loading experiences.
For the large size, set the size
prop to ”large”
.
Center the spinner in the middle of a page or content that's loading.
When updating only a portion of a page, position the spinner within that specific area.