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 hasn't stalled and to give them some idea of how long they’ll be waiting.

Progress indicators have two distinct styles:

  • Bar indicators, more commonly known as progress bars, show progress in a horizontal bar.
  • Spinning indicators show progress in a circular form, either as a spinner or as a circle that fills in as progress continues.

People don't interact with progress indicators; however, they are often accompanied by a button for canceling the corresponding operation.

Screenshot of a Safari window, cropped to show the Downloads popover. In the popover, the progress of a download is shown by a progress bar that's filled to about the midpoint.

Use a progress indicator in a view, not a window frame. Progress indicators aren’t intended for use within window frame areas, such as toolbars and status bars. Instead, display a progress indicator in a view, such as the Safari Downloads popover.

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 users can open to monitor the status of network operations.

Let people halt processing, if possible. If people can interrupt a process without causing negative side effects, include a Cancel button that gets triggered when the user presses the Esc (Escape) key. If the interruption of a process might cause negative side effects, such as the loss of the downloaded portion of a file, provide a Stop Progress icon button instead of a Cancel button. See System Icons.

For related guidance, see Loading. For developer guidance, see NSProgressIndicator.

Determinate Progress Indicators

A determinate progress indicator displays a bar or circle that changes in appearance to show the progression of a task with a known duration.

Image of a horizontal progress bar filled almost to the midpoint with solid blue color.

Determinate progress bar

Image of a circular progress indicator filled almost to the four o'clock position with gray color.

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 to complete the remaining 10 percent, for example, would be misleading and annoying.

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

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. To help avoid this situation, you can also play a system sound when progress completes.

If 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 or 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.

For developer guidance, see the isIndeterminate property of NSProgressIndicator, NSProgressIndicatorBarStyle, and NSProgressIndicatorSpinningStyle.

Indeterminate Progress Indicators

Use an indeterminate progress indicator when your app performs an unquantifiable task, such as loading or synchronizing complex data. These indicators appear as an animated bar or circular spinner that disappears when the task completes.

Image of a completely filled horizontal progress bar. The blue fill is animated to cycle through various shade changes as progress continues.

Indeterminate progress bar

Image of a circular progress indicator that animates the shading of its spokes in a clockwise direction as progress continues.

Spinning progress indicator

Use a spinning progress indicator primarily to communicate the status of a background operation or when space is constrained. Spinners are small and unobtrusive, so they’re useful for asynchronous background tasks, like retrieving messages from a server. Spinners are also useful for communicating progress within a small area, such as within a text field or next to a specific control, such as a button.

When possible, switch from an indeterminate progress bar to a determinate progress bar. If an indeterminate process reaches a point where its duration can be determined, switch to a determinate progress bar. People generally prefer a determinate progress indicator, because it helps them gauge what’s happening and how long it will take.

Don’t transition from a spinner to a progress bar. Spinners and progress bars are different shapes and sizes, so it doesn’t make sense to transition from one to the other.

Keep indeterminate progress indicators moving so people know something is happening. People associate a stationary indicator with a stalled process or a frozen app. If a process has stalled for some reason, provide users with feedback that helps them understand the problem and what they can do about it.

Spinning progress indicators should not be labeled. Because a spinner typically appears when the user initiates a process, a label is unnecessary.

For developer guidance, see the isIndeterminate property of NSProgressIndicator, NSProgressIndicatorBarStyle, and NSProgressIndicatorSpinningStyle.