How to create a custom activity indicator in Swift/iOS?

We are using an activity indicator in the project in order to show the progress of API calls, data store, data transfer, data delete. usually, we use a third-party library like MBProgressView to show activity indicators in the application. let’s see How to create a custom activity indicator in Swift/iOS?

Sometimes, the client or UX designer may ask for a custom-designed activity indicator to integrate in-app. Custom activity indicators could be based on their company profile like logo, color code, and other aspects.

Create custom activity indicator is a primitive task in the early stage of the project, we need to have few resources like image icon and color from the designer, for example, let’s see how we can create custom activity indicator in swift. 

This is how our custom progress bar will look like. 

1. Let’s start by creating a new project in Xcode.
2. Add a circular view image for rotate circular in the way we want, you can try these icons.

Add images to bundle:

1. Select Assets.xcassets from project bundle.
2. Create a new image set in Assets.xcassets.
3. Add those images into Assets.xcassets file in the bundle.

Design ViewController:

Now, in ViewController take an UIImageView from the component list, and then add center horizontal and vertical constraints for UIImageView.

Add two UIButtons for start and stop activity indicator.

Code :

Add outlets of imageView in viewController file and set image to imageView by didSet property lifecycle object.

Add one timer property for handle activity indicator animation.

In viewDidLoad() hide customIndicatorImageView.

Now the important section of code will come around, how we can animate an image in circular form on view controller with help of timer.

1. First of all, change the isHidden property of customIndicatorImageView to false.
2. In this function, we are initializing timer property with scheduling 0.0, the time interval
3. Here we are also calling a self.animateView() function to refer action of timer.
4. Note: Timer should not be nil before initialization, because we are de-initializing timer when we are stopping the activity indicator.

let’s see how animateView() functions work. By using UIView.animate() predefined function, we can perform animation with multiple views. UIView.animate() has two callbacks.

1. Animations: This callback calls when the animation UIView.animate() function initiated.
2. Completion: This callback calls when the animation finished after a specified time duration.

In Animation callback, we rotated customIndicatorImageView in order to rotate in 360 degrees by using transform UIView property.

In Completion callback we are checking if the timer is not nil, we are rescheduling timer by referring animateView() function.

Here stopTimer() function invalidate timer and set nil to stop animation.

Create IBAction Outlets of Start and Stop Button, to start and stop animation,

• On tap StartCustomIndicatorButton show customIndicatorImageView on viewController and Call startTimer() function.
• On tap StopCustomIndicatorButton hide customIndicatorImageView on viewController and Call stopTimer() function.

If you like this article please share. if you want to share something, please email me on blogswithrahul@gmail.com

Happy Coding!