Spinner usage guidelines
Spinner lets a user know when a page, section, or action is loading.
When to use
Section titled “When to use”- To indicate ongoing loading of a page, a section, or an action.
- To give users feedback that the action they took is processing or loading and that the UI is working properly.
- To indicate a page or section is loading during page transitions.
When not to use
Section titled “When not to use”- For actions and processes that are completed instantly or nearly instantly (less than 1 second) a spinner is unnecessary and can cause visual confusion.
- For actions and processes that take a very long time to complete (more than 10 seconds), spinner should not be used.
- For asynchronous processes that can be completed in the background, like generating a report, progress bar can be used instead.
- For page loading or processes that are necessary to load, like updating a data table, the loading performance should be improved or another UX flow should be used.
Properties
Section titled “Properties”import { Spinner, Stack } from '@cimpress-ui/react';
export default function Demo() { return ( <Stack gap={32} direction="horizontal" align="center" wrap> <Spinner size="small" label="Loading small" /> <Spinner size="medium" label="Loading medium" /> <Spinner size="large" label="Loading large" /> </Stack> );}| Size | Use cases |
|---|---|
| Small | The small spinner is used to show loading states inline in components like button or next to components and text elements. |
| Medium | The medium spinner is the standard spinner size and is used to show most loading states. It’s used to show loading in UI sections like tables, drawers, and containers. |
| Large | The large spinner is used for full-page loading states. |
Formatting and layout
Section titled “Formatting and layout”Placement
Section titled “Placement”Spinners placed in containers or used to show full-page loading should be centered both horizontally and vertically in the content area they represent. For example, if a spinner is being shown while an image in a card is loading, it should be center-aligned to where the image is displayed. If the spinner represents the whole card, however, it should be center-aligned in the whole card.
If the small spinner is being used inline with other elements, it can be left or right aligned with that element.
Button alignment
Section titled “Button alignment”The button component has a loading state with the spinner built into it. This should be used to show loading in button actions. Refer to the button documentation for more information about showing loading states in buttons.
Content writing
Section titled “Content writing”- The spinner label is enabled by default and should be used unless there is no room for additional text or the spinner is being used inline with other elements.
- The label text should always start with “Loading” and then describe what is being loaded.
- Be specific but concise about what is being loaded. Stick to short phrases of no more than 3-5 words.
- Do not use an ellipsis (…) at the end of the label.