Spinner
Loading indicator.
Related components
Skeleton
Use only while the entire page loads and for up to 5s.
Custom loading state
Use animations, illustrations, or progress bars for a process that takes more than 5s or when the content that will load has an irregular shape, such as a graph.
- If a process takes more than 5s, it's recommended to include the option to cancel the task and also the option to leave the page without interrupting the process.
- When it's not possible to design and implement a custom loading state, use a Spinner and include a short text below it or to its right explaining what is happening.
- Don’t show any loading feedback for processes that take less than 1s.