Intro
The activity indicator is an Apple native component that uses an animated image to indicate indeterminate progress. It supports a circular image that appears to spin by filling in the color clockwise.
Activity indicator on compact screen (left) and regular screen (right)
Anatomy
A. Spinner
The spinner is mandatory for activity indicators. It spins clockwise during the loading process.
B. Label (Optional)
An optional label can be used to provide more information about the loading process. It can appear on the right side or under the spinner.
Anatomy of activity indicator
Behavior and Interaction
Loading Indicator
Full-Screen Loading
The loading indicator appears in the center of the screen and informs the user that app content is currently loading. If possible, use an appropriate loading label to inform the user about what is loading.
Lazy Loading
When the user scrolls through a list, the inline loading indicator may appear below the current content to indicate that additional list content is being loaded.
Partial Loading
A loading indicator can be used when a part of the screen content needs to be updated or refreshed. The loading indicator is placed on the top of an overlay that covers the content. The indicator and the overlay disappear once loading is complete.
Loading indicator used in full screen (left), lazy loading (middle), and partial loading (right)
Adaptive Design
While the text size remains the same on both compact and regular screens, the spinner size is different. Use a 22 pt x 22 pt spinner on a compact screen and a 30 pt x 30 pt spinner on a regular screen.
Examples of activity indicator on a compact screen (left) and a regular screen (right)
Resources
Development: UIKit FUILoadingIndicatorView, UIKit FUIModalLoadingIndicatorView, UIKit FUIModalLoadingIndicator, SwiftUI LoadingIndicator
SAP Fiori for Android: Circular Progress Indicator
Human Interface Guidelines: Loading, Progress Indicators