A spinner is visual indicator of an ongoing, user-initiated process.
Usage
Use a spinner to offer visual feedback to show users their action is processing. Below is a comparison of spinner usage with progress bar usage.
Spinner Usage
- When you want to indicate "This will be a moment". Between 1-10 seconds
- When progress cannot be indicated by percentage
- When space is limited
Progress Bar Usage
- To want to indicate "This will take awhile, here is an estimate". More than 10 seconds
- When progress can be indicated by percentage
- When space permits
Types
Clarity has two types of spinners.
Page Spinner
When the operation to be tracked is related to the entire page.
Inline Spinner
When the operation being tracked is related to a specific component or section on a page.
Inverse Spinner
When there is a dark background behind a spinner, use the inverse to make it accessible.
Sizes
Large
Large spinners have 3rem (72px) width and height. Use them to track progress of an operation that is related to the page. For example, while a form is being authenticated, use a large spinner on top of or in place of the form controls.
Medium
Medium spinners have 1.5rem (36px) width and height. Use them to track progress when content is being loaded. For example when data for a table or datagrid is being loaded.
Small
Small spinners have 0.75rem (18px) width and height. Use them in constrained spaces like an input field or next to a button. While the spinner is animating and active the input field or button should be disabled until the action is complete.
Label
An optional label can be projected into the element that describes the process.