A spinner is visual indicator of an ongoing, user-initiated process.
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.
- 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
Clarity has two types of spinners.
When the operation to be tracked is related to the entire page.
When the operation being tracked is related to a specific component or section on a page.
When there is a dark background behind a spinner, use the inverse to make it accessible.
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 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 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.
An optional label can be projected into the element that describes the process.