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.
