Progress Indicators

A Progress Indicator communicates to the user that a time consuming operation, roughly one second or longer, is taking place.

Web

When to Use

Use the Progress Bar when the amount of load time is known, such as when uploading an image.
Use the Infinite Loader when the amount of load time is unknown, such as when loading a new part of the application.

Appearance & Behavior

Progress Bar

A Progress Bar shows a visual representation of the percentage of progress made. This gives the user an indication of how much longer she might have to wait.

progress

Progress Bar changes from gray to blue as progress is made

Infinite Loader

An Infinite Loader indicates that progress is being made, but the amount of progress and how much longer the user may have to wait is unknown. The use of this pattern should be avoided in favor of a speedy application.

InfiniteLoader

Infinite Loader keyframes

Sizes

  • Large: 160px by 160px
  • Small: 24px by 24px

Loading more content

Sometimes the user can initiate loading more content (Lazy Loading) by either clicking or scrolling. In this case, the Infinite Loader appears until the content is loaded. Nothing in the application should be disabled.

Small Loader example: 24px x 24px

Example of a small infinite loader in part of an application

Loading a new section of the application

Our products are designed to be super-speedy, but we have an Infinite Loader built into our applications as a communication tool for cases where the loading process isn’t so speedy (such as a slow connection or a super heavy data load). To promote loading speed and to help keep our users single-task focused, the Infinite Loader appears on top of a 70% white overlay to disable the background application until the new section is loaded.

Example of a large infinite loader requiring a disabled page.

Example of a large infinite loader with text below (use with caution)

iOS

When to Use

To show that processing is occurring, without suggesting when it will finish.

Appearance & Behavior

Use the native activity indicator.

  • Spins while a task is progressing and disappears when the task completes
  • Doesn’t allow user interaction
ALERT WITH NO BUTTON (IPHONE)

ALERT WITH NO BUTTON (IPHONE)

Android

When to Use

To show that processing is occurring, without suggesting when it will finish.

Appearance & Behavior

progress_droid

Where this pattern is used

 

 

© Intuit 2016 | Terms of use