Progress Indicators

Don’t make people sit around staring at a static screen waiting for your app to load content or perform lengthy data processing operations. Use progress indicators to let people know your app isn’t stalled and to give them some idea of how long they’ll be waiting. Progress indicators can be displayed in bar or circular form. Progress indicators are noninteractive, although they are often accompanied by a button for canceling the corresponding operation.

Use a progress indicator in a view, not a window frame. Progress indicators aren’t intended for use within portions of window frames, such as in toolbars and status bars.

Display progress indicators in consistent locations. Choosing a consistent location for a progress indicator makes it easy for people to quickly check a familiar place for the status of an operation. For example, Mail offers an Activity panel that can be opened to monitor the status of network operations.

Let people halt processing, if appropriate. If a process can be safely interrupted, a Cancel push button (that’s triggered when the Esc key is pressed) should accompany the progress indicator. If a process can be interrupted with possible side effects, a Stop Progress icon button should be provided instead of a Cancel button. See System Icons.

For related guidance, see Loading. For developer guidance, see NSProgressIndicator, NSProgressIndicatorBarStyle, and NSProgressIndicatorSpinningStyle.

Determinate Progress Indicators

A determinate progress indicator includes a bar or circle that fills to show the progression of a task with a known duration.

Determinate progress bar

Determinate progress circle

Use a determinate progress indicator for a task with a well-defined duration. A determinate progress indicator is great for showing the status of a task, especially when it helps convey how much longer the task needs to complete. For example, you could use a determinate progress indicator to show the progress of a file conversion. If a task isn’t quantifiable, use an indeterminate progress indicator instead.

Always report progress accurately. Don’t display inaccurate progress information just to make your app appear busy. A progress indicator that becomes 90 percent complete in 5 seconds but takes 5 minutes for the remaining 10 percent, for example, would be misleading and annoying.

Consider customizing a progress indicator’s appearance to match your app. A progress indicator’s appearance can be adjusted to match your app’s design. You can specify, for example, a custom tint for the fill.

In general, hide a determinate progress indicator after it’s completely filled. Be sure to let the fill complete before dismissing the indicator, though. If you dismiss the indicator too soon, people are likely to wonder if the process really finished.

If it’s helpful, include a label with a determinate progress indicator to add context. Provide a complete or partial sentence that briefly describes the process that’s occurring. Avoid vague terms like Loading and Authenticating because they don’t usually add any value. Use sentence-style capitalization and end with an ellipsis (...) to emphasize the ongoing nature of the process.

Indeterminate Progress Indicators

An indeterminate progress indicator appears as a bar or circular spinner that animates as an unquantifiable task, such as loading or synchronizing complex data, is performed. It disappears when the task completes.

Indeterminate progress bar

Spinner

Favor determinate progress indicators. If activity is quantifiable, use a determinate progress indicator so people can better gauge what’s happening and how long it will take.

Use a spinner primarily to communicate the status of a background operation or when space is constrained. Spinners are small and unobtrusive, so they’re especially useful for asynchronous background tasks, like retrieving messages from a server. Spinners are also useful when progress must communicated in small areas, such as within text fields or next to specific controls.

Switch from an indeterminate progress bar to a determinate progress bar when appropriate. If an indeterminate process reaches a point where its duration can be determined, switch to a determinate progress bar.

Don’t transition from a spinner to a determinate progress bar. Spinners and progress bars are different shapes and sizes, so it doesn’t make sense to transition from one to the other. Start with an indeterminate progress bar so it transitions naturally to a determinate progress bar.

Keep indeterminate progress indicators moving so people know something is happening. A stationary indicator is usually associated with a stalled process or a frozen app.

In general, avoid supplementing a spinner with a label. Because a spinner typically appears when the user explicitly initiates a process, a label is usually unnecessary.