Loading 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.

Appearance and behavior

QuickBooks Online indeterminate loading spinner

Use this loader when we don’t know the amount of load time, such as when loading a new part of the application. An indeterminate loader shows users that some progress is happening. Avoid using this pattern. The system should be fast enough so that we don’t need to display this spinner.

Examples

QuickBooks Online indeterminate spinner example

QuickBooks Online help dropdown indeterminate spinner example

QuickBooks Online determinate loading spinner

Display the determinate loading spinner when we know the amount of load time. We’re still working on defining the specs for these spinners.

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.

Loading a new section of the application

We design our products to be super-speedy, but we have an infinite loader built in as a communication tool for when the loading process isn’t so speedy, such as when there’s a slow connection or heavy data load.

To promote loading speed and help keep users focused on their work, the infinite loader appears on top of a 70% white overlay to disable the background application until the new section is loaded.

Mobile

Launch Preview
x
px wide

  • Was this Helpful?
  •