Progress and activity

Users should feel confident that actions that they want, such as rescaling an image or opening a screen, are progressing as expected.

Sometimes, apps need time to complete complex calculations or to download data (for example, displaying a local weather forecast for example). When a process takes longer than expected, let users know about the process and its progress. If the user has to wait more than 3 seconds, show a progress or activity indicator.

Best practices

Use a progress indicator if you know how long the action will take.

Use an activity indicator if you want to show that your app is working, but you can't determine how long it will take.

Give users a break. Consider letting users tap a progress or activity indicator to show an option to pause or cancel a downloading or uploading process.

Don't interrupt. When you implement an indicator, let users interact with the application while the indicator is displayed by using a toast or inline control.

Don't use too much space. Place the indicator where it will not obscure the view of the screen too much, for example, at the bottom of the screen, just above the action bar.

An activity indicator spinning.

Activity indicator

A progress bar showing download progress.

Progress indicator

Inline indicators

Inline indicators are non-modal ways to let users see progress information and continue with what they're doing.

Use when

There's a UI component you can attach the indicator to.

Examples

  • Synchronizing an inbox
  • Updating an RSS feed with a few channels

Screen showing several inline progress bars.

Dialogs

Dialogs are a modal way to show progress or activity. Users can't interact with the screen during the process. Activity indicators should be used in the title of the dialog, not in the body.

Use when

  • You can't process in the background.
  • The app needs to finish a process before the user can use it again.

Example

Connecting to a remote server.

For more best practices for activity and progress indicators, see Components.

Toasts

Toasts are a non-modal way to show progress while users remain on the screen and are allowed to continue.

A progress bar in a toast.

Use when

The UI doesn't have individual components you can attach the indicator to.

Example

Uploading an image



Got questions about leaving a comment? Get answers from our Disqus FAQ.

comments powered by Disqus