Loader
Loading spinners and progress indicators show users that the system is actively retrieving data, even when it takes a moment to complete the task.
2.0.1
25 Nov 2019
Usage
Our users expect to complete online tasks quickly – but some information can take time to display. Loaders reassure them that the system is still working, even if there is a temporary lag. They also provide a visual distraction that can make time appear to go more quickly.
Full page loader
Full page loaders are useful for processes that can take a long time, such as submitting a form, saving updates or loading an app. These loaders can provide more detail to users – like the time or percentage of the job remaining, and whether it's safe to navigate away from the screen.
Circular loader
Use circular loaders when user activities are expected to be short – under five seconds or so.
Instant feedback
Always give instant visual feedback when a user has to wait for a process to complete.
Percentage loader
Use a percentage loader for activities expected to take ten seconds or more. This loader fills gradually from zero to 100%, never decreasing in value.
Time loader
Time loaders don't need to be exact, but should give an indication of the time remaining before the task is expected to be complete. Knowing how long is left encourages the user to wait.
Visual distraction
Loaders should be visually interesting, to offer users a distraction while they wait. Watching a time-remaining countdown or percentage-complete loader makes the time seem to pass more quickly.