Custom Loader (Activity Indicator) in Swift

Creating a custom activity indicator in Swift allows you to tailor the appearance and behavior of your loading spinner to fit the style of your app. Here's a step-by-step guide to creating a simple custom activity indicator using UIView




Step 1: Create a New Swift File for the Custom Activity Indicator

1. Create a new Swift file and name it RotatingCirclesView.swift.

2. Add the following code to define a custom UIView subclass for your activity indicator:

//
//  RotatingCirclesView.swift
//  Welcome In
//
//  Created by Praveen Kumar on 05/09/24.
//

import UIKit

class RotatingCirclesView: UIView {
    
    let circle1 = UIView(frame: CGRect(x: 20, y: 20, width: 60, height: 60))
    let circle2 = UIView(frame: CGRect(x: 120, y: 20, width: 60, height: 60))
    
    let position: [CGRect] = [CGRect(x: 30, y: 20, width: 60, height: 60), CGRect(x: 60, y: 15, width: 70, height: 70),CGRect(x: 110, y: 20, width: 60, height: 60), CGRect(x: 60, y: 25, width: 50, height: 50)]
    
    override init(frame: CGRect){
        super.init(frame: frame)
        configure()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    private func configure(){
        translatesAutoresizingMaskIntoConstraints = false
        circle1.backgroundColor = UIColor.systemCyan.withAlphaComponent(0.9)
        circle1.layer.cornerRadius = circle1.frame.width/2
        circle1.layer.zPosition = 2
        
        circle2.backgroundColor = UIColor.systemPink.withAlphaComponent(0.9)
        circle2.layer.cornerRadius = circle2.frame.width/2
        circle2.layer.zPosition = 1
        
        addSubview(circle1)
        addSubview(circle2)
    }
    
    func animate(_ circle: UIView, counter: Int){
        var counter = counter
        UIView.animate(withDuration: 0.4, delay: 0,options: .curveLinear, animations: {
            circle.frame = self.position[counter]
            circle.layer.cornerRadius = circle.frame.width/2
            
            switch counter {
            case 1:
                if circle == self.circle1{ self.circle1.layer.zPosition = 2 }
            case 3:
                if circle == self.circle1{ self.circle1.layer.zPosition = 0}
            default:
                print("")
            }
        }){ (completed) in
            switch counter {
            case 0...2:
                counter += 1
            case 3:
                counter = 0
            default:
                print("")
            }
            self.animate(circle, counter: counter)
        }
    }
}

Step 2: Use the Custom Activity Indicator in Your View Controller

1. Add the custom activity indicator to your view controller:

//  ViewController.swift
//  CustomActivityIndicators
//
//  Created by Praveen Kumar on 05/09/24.
//

import UIKit

class ViewController: UIViewController, UIGestureRecognizerDelegate {
    
    let rotatingCirclesView = RotatingCirclesView()

    override func viewDidLoad() {
        super.viewDidLoad()
        configuratinLoader()
        let tap =  UITapGestureRecognizer(target: self, action: #selector(self.viewTaped))
        view.addGestureRecognizer(tap)
    }
    private func configuratinLoader(){
        view.addSubview(rotatingCirclesView)
        NSLayoutConstraint.activate([
            rotatingCirclesView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            rotatingCirclesView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
            rotatingCirclesView.heightAnchor.constraint(equalToConstant: 100),
            rotatingCirclesView.widthAnchor.constraint(equalToConstant: 200)
        ])
    }
    
    @objc func viewTaped(){
        rotatingCirclesView.animate(rotatingCirclesView.circle1, counter: 1)
        rotatingCirclesView.animate(rotatingCirclesView.circle2, counter: 3)
    }
}

Explanation

• RotatingCirclesView Class:

  • Inherits from UIView to draw a circular path.
  • Configures two layers: one for the background and one for the animated circle.

• ViewController:

  • Instantiates and adds the RotatingCirclesView to the view.
  • Configures layout constraints to center the indicator.
  • Starts and stops the animation to simulate a loading state.

Feel free to customize the appearance and animation of the RotatingCirclesView to better fit your app's design. - Github Source code:- https://github.com/praveenraman/CustomActivityIndicators.git