ActivityIndicator View

ActivityIndicator is a kind of content view that can be used to show that a task is in progress. It is mainly used in-network calls. We can control the ActivityIndicator View by using methods defined in UIActivityIndicatorView class. UIActivityIndicatorView is the subclass of UIView.

We can start the animation by calling the startAnimating() method of UIActivityIndicatorView class. Similarly, the stopAnimating() method can be used to stop the animation. The two methods are used in combination to show and hide the activity indicator in the iOS application.

Adding UIActivityIndicatorView to interface

Search for UIActivityIndicatorView in the object library and drag the result to the storyboard.
Define the Auto Layout rules to govern the size and position of activity indicator on the different size devices.
Create an action outlet of ActivityIndicator in ViewController class.
Use the methods and properties defined in the UIActivityIndicatorView class to start and stop the animation accordingly.

Methods and properties

SN	Method or property	Description
1	func startAnimating()	This method is used to start the animation of the activity indicator.
2	func stopAnimating()	This method is used to stop the animation of the activity indicator.
3	var isAnimating : Bool	This is a boolean property that indicates whether the activity indicator is animating or not.
4	var hidesWhenStopped() : Bool	This is a Boolean property that controls whether the receiver is hidden when the animation is stopped.
5	var style:UIActivityIndicatorView.style	It is the basic appearance of the activity indicator.
6	var color:UIColor	It determines the color of the Activity Indicator.

Example 1

This is a simple example that visualizes the activity indicator view on the screen.

Interface Builder

In this example, we will first add the ActivityIndicatorView to the storyboard. For this purpose, we will search for the UIActivityIndicatorView in the object library and drag the result to the storyboard.

Define the auto-layout rules for the activity indicator and create the connection outlet in the view controller.

ViewController.swift

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var activityIndicator: UIActivityIndicatorView!
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        activityIndicator.style = .whiteLarge
        activityIndicator.startAnimating()
    }
    
}

Output:

Example 2

In Example1, we have displayed an uncontrolled UIActivityIndicatorView. In this example, we will create two buttons to start and stop the animation of the activity indicator. In the action outlet of the start button, we will start the animation, whereas, in the action outlet of the stop button, we will stop the animation.

Interface Builder

The following image shows the storyboard we will create in the example. This is similar to example 1 to most of the extent. In this example, we will also add the buttons to control the behavior of the Activity indicator view.

ViewController.swift

import UIKit


class ViewController: UIViewController {


    @IBOutlet weak var startBtn: UIButton!
    @IBOutlet weak var activityIndicator: UIActivityIndicatorView!
    @IBOutlet weak var stopBtn: UIButton!
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        activityIndicator.style = .whiteLarge
        activityIndicator.hidesWhenStopped = true
        startBtn.layer.cornerRadius = 10
        startBtn.layer.borderColor = UIColor.black.cgColor
        startBtn.layer.borderWidth = 1
        stopBtn.layer.cornerRadius = 10
        stopBtn.layer.borderWidth = 1
        stopBtn.layer.borderColor = UIColor.black.cgColor
    }


    @IBAction func clickedStartBtn(_ sender: Any) {
        activityIndicator.startAnimating()
    }
    
    @IBAction func clickedStopBtn(_ sender: Any) {
        activityIndicator.stopAnimating()
    }
    
}

Output: