iOS Developer Library

Developer

iOS 7 Design Resources UIKit User Interface Catalog

Download PDF

Activity Indicators

An activity indicator is a spinning wheel that indicates a task is in the midst of being processed. If an action takes a noticeable and indeterminate amount of time to process—such as a CPU-intensive task or connecting to a network—you should display an activity indicator to give assurance to the user that your app is not stalled or frozen.

image: ../Art/uiactivityindicator_intro.png

Purpose. Activity indicators allow users to:

  • Receive feedback that the system is processing information

Implementation. Activity indicators are implemented in the UIActivityIndicatorView class and discussed in the UIActivityIndicatorView Class Reference.

Configuration. Configure activity indicators in Interface Builder, in the Activity Indicator section of the Attributes Inspector. A few configurations cannot be made through the Attributes Inspector, so you must make them programmatically. You can set other configurations programmatically, too, if you prefer.

image: ../Art/uiactivityindicatorview_attributes_inspector_plain_2x.png

Content of Activity Indicators

An activity indicator is indeterminate, and has no starting or ending values associated with it.

Behavior of Activity Indicators

The Animating (isAnimating) box is unchecked by default; checking it causes the activity indicator to start animating. This is the equivalent of calling the startAnimating method.

Select the Hides When Stopped (hidesWhenStopped) field in the Attributes Inspector for your activity indicator to disappear when the animation ends. When you call the startAnimating and stopAnimating methods, the activity indicator automatically shows and hides onscreen. This way, you won’t have to worry about displaying a stationary activity indicator.

image: ../Art/uiactivityindicatorview_attributes_inspector_plain_2x.png

Appearance of Activity Indicators

You can customize the appearance of an activity indicator by setting the properties depicted below.

image: ../Art/uiactivityindicator_callouts.png

To customize the appearance of all activity indicators in your app, use the appearance proxy (for example, [UIActivityIndicatorView appearance]). For more information about appearance proxies, see Appearance Proxies.

Style

The Style (activityIndicatorViewStyle) field represents the predefined style of the activity indicator. Use the style to specify one of two default colors: white or gray. You can also select a larger size for your indicator using the “Large White” style option.

The Color (color) field allows you to specify a custom color for your indicator. This property takes precedence over any color set using the Style field. However, if your style is set to Large White, your activity indicator appears a larger size. Make sure your indicator is set to a different style option if you want to use the small indicator.

image: ../Art/uiactivityindicator_attributes_inspector_main_2x.png

Using Auto Layout with Activity Indicators

You can create Auto Layout constraints between an activity indicator and other UI elements.

Typically, activity indicators appear before a label or centered within a view. To align with a label, constrain Bottom Edges and Horizontal Space to the label with the standard value. To center within a view, add the Horizontal Center in Container and Vertical Center in Container constraints.

For general information about using Auto Layout with iOS views, see Using Auto Layout with Views.

Making Activity Indicators Accessible

Activity indicators are accessible by default. The default accessibility trait for an activity indicator is User Interaction Enabled.

If you have a label next to your activity indicator that describes the processing task in more detail, you might want to disable its accessibility with the isAccessibilityElement property so VoiceOver reads the label instead. Otherwise, VoiceOver reads “In progress” while the activity indicator is animating, and “Progress halted” while it is not.

VoiceOver will read only elements that are visible onscreen. If you enable the hidesWhenStopped property, VoiceOver might abruptly stop speaking when the animation finishes.

For general information about making iOS views accessible, see Making Views Accessible.

Internationalizing Activity Indicators

Activity indicators have no special properties related to internationalization. However, if you use an activity indicator with a label, make sure you provide localized strings for the label.

For more information, see Internationalization Programming Topics.

Debugging Activity Indicators

When debugging issues with activity indicators, watch for this common pitfall:

Specifying conflicting appearance settings. The color property takes precedence over any color set using the activityIndicatorViewStyle property. However, if your style is set to Large White, your activity indicator appears a larger size with whatever custom color you set. Make sure your indicator is set to a different style option if you want to use the small indicator.

Elements Similar to an Activity Indicator

The following element provides similar functionality to an activity indicator:

Progress View. A class that represents a progress bar. Use this class instead of an activity indicator when your task takes a determinate amount of time. For more information, see Progress Views.