Circular progress & activity indicator

Material Design progress indicators display the length of a process or express an unspecified wait time. There are two styles of progress indicators: linear and circular.

This component only provides the circular implementation. See Progress View for the linear implementation.

Design & API documentation

Related components

Table of contents

• Overview
• Installation
  • Installation with CocoaPods
  • Importing
• Usage
  • Typical use: Indeterminate
  • Typical use: Determinate
  • Showing multiple indeterminate colors
• Extensions
  • Color Theming

Overview

MDCActivityIndicator is a view that has two modes: indeterminate and determinate. Indeterminate indicators express an unspecified wait time, while determinate indicators represent the length of a process. Activity indicators are indeterminate by default.

Installation

Installation with CocoaPods

Add the following to your Podfile:

pod 'MaterialComponents/ActivityIndicator'

Then, run the following command:

pod install

Importing

To import the component:

Swift

import MaterialComponents.MaterialActivityIndicator

Objective-C

#import "MaterialActivityIndicator.h"

Usage

Typical use: Indeterminate

MDCActivityIndicator instances are indeterminate by default.

Swift

let activityIndicator = MDCActivityIndicator()
activityIndicator.sizeToFit()
view.addSubview(activityIndicator)

// To make the activity indicator appear:
activityIndicator.startAnimating()

// To make the activity indicator disappear:
activityIndicator.stopAnimating()

Objective-C

MDCActivityIndicator *activityIndicator = [[MDCActivityIndicator alloc] init];
[activityIndicator sizeToFit];
[view addSubview:activityIndicator];

// To make the activity indicator appear:
[activityIndicator startAnimating];

// To make the activity indicator disappear:
[activityIndicator stopAnimating];

Typical use: Determinate

MDCActivityIndicator instances can be shown as determinate by modifying the indicatorMode property and setting a percentage progress with progress. progress must be set to a floating point number between 0 and 1. Values beyond this range will be capped within the range.

Note: Activity indicators are hidden unless they are animating, even if the indicator is determinate progress.

Swift

let activityIndicator = MDCActivityIndicator()
activityIndicator.sizeToFit()
activityIndicator.indicatorMode = .determinate
activityIndicator.progress = 0.5
view.addSubview(activityIndicator)

// To make the activity indicator appear:
activityIndicator.startAnimating()

// To make the activity indicator disappear:
activityIndicator.stopAnimating()

Objective-C

MDCActivityIndicator *activityIndicator = [[MDCActivityIndicator alloc] init];
[activityIndicator sizeToFit];
activityIndicator.indicatorMode = MDCActivityIndicatorModeDeterminate;
activityIndicator.progress = 0.5;
[view addSubview:activityIndicator];

// To make the activity indicator appear:
[activityIndicator startAnimating];

// To make the activity indicator disappear:
[activityIndicator stopAnimating];

Showing multiple indeterminate colors

Indeterminate activity indicators support showing multiple colors via the cycleColors API. Consider using this property if your brand consists of more than one primary color.

Swift

let activityIndicator = MDCActivityIndicator()
activityIndicator.cycleColors = [.blue, .red, .green, .yellow]

Objective-C

MDCActivityIndicator *activityIndicator = [[MDCActivityIndicator alloc] init];
activityIndicator.cycleColors =  @[ UIColor.blueColor,
                                    UIColor.redColor,
                                    UIColor.greenColor,
                                    UIColor.yellowColor ];

Extensions

Color Theming

You can theme an activity indicator with your app's color scheme using the ColorThemer extension.

You must first add the Color Themer extension to your project:

pod 'MaterialComponents/ActivityIndicator+ColorThemer'

Run pod install again.

Swift

// Step 1: Import the ColorThemer extension
import MaterialComponents.MaterialActivityIndicator_ColorThemer

// Step 2: Create or get a color scheme
let colorScheme = MDCSemanticColorScheme()

// Step 3: Apply the color scheme to your component
MDCActivityIndicatorColorThemer.applySemanticColorScheme(colorScheme, to: activityIndicator)

Objective-C

// Step 1: Import the ColorThemer extension
#import "MaterialActivityIndicator+ColorThemer.h"

// Step 2: Create or get a color scheme
id<MDCColorScheming> colorScheme = [[MDCSemanticColorScheme alloc] init];

// Step 3: Apply the color scheme to your component
[MDCActivityIndicatorColorThemer applySemanticColorScheme:colorScheme
     toActivityIndicator:activityIndicator];