Loaders
Loaders indicate that the content meant for a given container is taking extra time to appear.
Section titled “ Design”Variants
Section titled “Variants”Skeleton loaders
Section titled “Skeleton loaders”In Practice
Section titled “ In Practice”Spinners
Section titled “Spinners”Spinners offer visual feedback to show users an action on a page, or section of a page, is processing. Use a spinner for in-line areas of the interface like a table or list.
Skeleton Loaders
Section titled “Skeleton Loaders”Skeleton loaders mimic the page’s layout by showing its elements in a shape similar to the actual content as it is loading and becoming available. Use skeleton loaders when:
- A spinner is not prominent enough, especially on high-traffic pages.
- When there’s more than one visible element loading at the same time.
- When data takes more than 300ms to load on an average connection.
Accessibility
Section titled “ Accessibility”- Spinners are not operable by keyboard.
- Use the title value on the spinner image for assistive technologies.
- Screen readers should register that something is “loading” or “processing” when a spinner appears on the screen.
- Users should also be made aware of status changes, such as when the content is “finished” loading or processing.
- Screen readers should be able to access the content behind skeleton loaders.
- The image replacements are for decorative presentation only and should be hidden from screen readers with aria-hidden=“true”.
For more information, see our accessibility guidelines.