material-components_material-components-ios/components/ActivityIndicator

Activity Indicators

Activity indicators are visual indications of an app loading content. The Activity Indicator is a circular indicator that either rotates clockwise or fills to completion clockwise when displaying progress.

Design & API Documentation

• Material Design guidelines: Progress & activity
• API: MDCActivityIndicator
• API: MDCActivityIndicatorMode
• API: MDCActivityIndicatorDelegate

---

Activity Indicator Modes

Indeterminate indicators

When indicators are indeterminate they request that the user wait while something finishes when it's not necessary to indicate how long it will take.

Determinate indicators

When indicators are determinate they indicate how long an operation will take when the percentage complete is detectable.

---

Installation

Installation with CocoaPods

To add this component to your Xcode project using CocoaPods, add the following to your Podfile:

pod 'MaterialComponents/ActivityIndicator'

To add this component along with its themer and other related extensions, please add the following instead:

pod 'MaterialComponents/ActivityIndicator+Extensions'

Then, run the following command:

pod install

---

Overview

Progress and activity indicators are visual indications of an app loading content.

---

Usage

Importing

Before using Activity Indicator, you'll need to import it:

Swift

import MaterialComponents

Objective-C

#import "MaterialActivityIndicator.h"

Indeterminate indicators

Indeterminate indicators visualize an unspecified wait time.

Determinate indicators

Determinate indicators display how long an operation will take.

---

Examples

Indeterminate indicators

When indicators are indeterminate they request that the user wait while something finishes when it's not necessary to indicate how long it will take. This is the default mode and no additional parameters need to be set.

Swift

let activityIndicator = MDCActivityIndicator(frame: CGRect(x: 0, y: 0, width: 32, height: 32))
view.addSubview(activityIndicator)

// Start animation
activityIndicator.startAnimating()
...
// Stop animation
activityIndicator.stopAnimating()

Objective-C

MDCActivityIndicator *activityIndicator =
    [[MDCActivityIndicator alloc] initWithFrame:CGRectMake(0, 0, 32, 32)];
[view addSubview:activityIndicator];

// Start animation
[activityIndicator startAnimating];
...
// Stop animation
[activityIndicator stopAnimating];

Determinate indicators

When indicators are determinate they indicate how long an operation will take when the percentage complete is detectable. The indicator mode must be set to determinate and a progress amount must be provided as a float in the range [0,1].

Swift

let activityIndicator = MDCActivityIndicator(frame: CGRect(x: 0, y: 0, width: 32, height: 32))
activityIndicator.indicatorMode = .determinate
activityIndicator.progress = 0.5
view.addSubview(activityIndicator)

// Start animation
activityIndicator.startAnimating()
...
// Stop animation
activityIndicator.stopAnimating()

Objective-C

MDCActivityIndicator *activityIndicator =
    [[MDCActivityIndicator alloc] initWithFrame:CGRectMake(0, 0, 32, 32)];
activityIndicator.indicatorMode = MDCActivityIndicatorModeDeterminate;
activityIndicator.progress = 0.5;
[view addSubview:activityIndicator];

// Start animation
[activityIndicator startAnimating];
...
// Stop animation
[activityIndicator stopAnimating];

---

Related Components

• Progress Views