Spinners give users instant feedback when the system needs more time to complete a task or display information.
Usage
Our users expect experiences that quickly accomplish tasks and display information. But sometimes doing those things takes a little time. During that lag, it’s important to show loading spinners because they let users know the system is working and will catch up.
There are 4 types of loading spinners. The four types are: determinate short, determinate long, indeterminate short, and indeterminate long.
Determinate loading spinners
Determinate spinners are used when at any point we know the beginning and end points, whether it be time or steps. The visual should show a sense of completeness to be considered determinate.
Determinate short
Use when % of time to load is available
Determinate long
Use when % of time to load is available and more than 4 seconds
Indeterminate loading spinners
Indeterminate spinners are used when at any point the time or steps are not known. Instead of a visual for “completeness”, there is a visual that shows indication that something is happening in the background. Sometimes there can be content associated with the spinner to reinforce to the users that something is happening in the background.
The system should be fast enough so that we don’t need to display this spinner. However, should you use this component, use it sparingly.
Indeterminate short
Use when % of time to load is unavailable
Indeterminate long
Use when % of time to load is unavailable, but estimated that it will be more than 4 seconds
Lazy loading
Sometimes the user can initiate loading more content by clicking or scrolling. In this case, we allow for lazy loading; the infinite loader appears until the content does. Nothing in the application should be disabled.
