An animated element that indicates loading is in process and where it will appear when loading data is slow.
Also known as:
SpinnerLoaderProgress indicatorsCircular indicatorsIndeterminate indicators
- Autocomplete (not built)
- Button Group (not built)
- Checkbox Group
- Date Picker (not built)
- Empty State
- Filter Menu
- Global Notification
- Guidance Block
- Hero Card
- Icon Button
- Infinite Scroll (not built)
- Inline Notification
- Likert Scale Legacy
- Loading Placeholder
- Loading Skeleton (not built)
- Loading Spinner
- Pagination (not built)
- Progress Bar (not built)
- Progress Stepper
- Radio Group
- Rich Text Editor
- Search Field (not built)
- Slider (not built)
- Split Button
- Tile Grid
- Toast Notification
- Center the loading spinner in the available space.
- Avoid showing multiple Loading Spinners on a single page.
- Give people an idea of what’s happening when a small content/data item takes less than 10s to load.
A loading spinner is generally a branded element with a looping animation that indicates loading is in process and where it will appear.
- Avoid showing multiple loading spinners on a single page. For example, in a list, you might show one loading spinner for the entire group of items instead of a loading spinner for each item in the list.
- The loading spinner accessibility label needs to describe the state of the loading element e.g. “Loading”, “Saving”, “Processing” and, where appropriate, the object e.g. “Loading comments”.
- You might avoid “jank” using CSS animations.
Learn more about loading patterns.
When to use
- For a tiny, inline action or feedback, e.g. clicked a button and the action will take time.
- For fast processes that take less than 300ms, consider a spinner or no loading state at all.
- When data takes less than 10s to load on an average connection for our user base.
- For low-traffic pages such as super-user only admin pages.
When not to use
- When there’s more than 1 element loading, use a loading skeleton instead.
- For a long-running process or background process, e.g. importing data or exporting reports, use a progress bar (link to come) instead.
- For high-traffic pages like our account dashboard, use a loading skeleton.
- For introducing content with flair, use a choreographed or stylized entrance. In contrast to a placeholder loading skeleton, choreographed or stylized entrances don’t care how long content takes to load. For example, the whole page might be loaded already, but we only reveal each section with a fade as the person scrolls down the page. A single stylized entrance may mask and replace a loading spinner.