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.

  • Was this Helpful?
  •