How to Recreate the Default iOS ActivityIndicator Using SwiftUI

Leverage gradients and circles

Photo by Mike van den Bos on Unsplash

An UIActivityIndicatorView is a view that shows that a task is in progress.
Today we will break down the default iOS activity indicator in SwiftUI using gradients and circles.

Note: I’m not sure the default iOS activity indicator is built the same way.

A brief image set of how we are going to break down the activity indicator view

How are we going to create the ActivityIndicatorView ?

We will have two circles. One inner circle and one outer circle.

The inner circle will be used to mask the cross diameter bars. The outer circle will be used to put an angular gradient mask and that circle will be rotated with an animation. The cross diameter bar is nothing but the Activity Indicator bar. It will always remain static.

Now you might how got an outlook on how we are going to achieve this Activity Indicator.

Let’s start

We will start with a Z-Stack. We will create a Z-Stack in the content view. The Z-Stack will contain an inner-circle, outer-circle, and cross diameter bars. This will start from the Z-Stack center.

We will setup the Z-Stack first and then we will create another View and name it CustomActivityIndicatorBar with a binding var input let’s name that input as rotationAngle .

Here the rotationAngle is used to draw the CustomActivityIndicatorBar at different positions. We will use that rotationAngle to set the rotationEffect angle. Make sure the CustomActivityIndicatorBar ‘s rotationEffect anchor point has to be centered .

Now our CustomActivityIndicatorBar is set. We just need to give different angles and set different CustomActivityIndicatorBar for those different angles.

Now let's create the OuterGradientCircle view. We just have to create a Circle and fill it with an Angular Gradient with a gradient:

static let gradientColors = Gradient(colors: [Color(UIColor(white: 1, alpha: 0.3)), Color(UIColor(white: 1, alpha: 0.9)), Color(UIColor(white: 1, alpha: 0.3))])

Use the following gradient and use this gradient to fill the circle.

Now once we are done creating the OuterGradientCircle and CustomActivityIndicatorBar we will move to our content view and start setting up our core settings.

Here we will have two State variables one isAnimating to tell the view that it needs to animate means the spinner outer circle will start spinning. And the other one capsuleAngles which will hold the different angle values for the CustomActivityIndicatorBar . This will position multiple CustomActivityIndicatorBar with respective angles for each with a center rotational anchor.

Input capsuleAngles with [0, 30, 60, 90, 120, 150] values.

Now we will create multiple CustomActivityIndicatorBar . For that, we will run a ForEach loop on capsuleAngles. And we will pass the rotationAngle for the CustomActivityIndicatorBar with the capsuleAngle as the ForEach item.

Also, we will set the frames for the inner circle and outer circle. The outer circle should have double the size of the inner circle. We just need to set the animation and kaboom a working activity indicator is up and ready for us. The content view can be referred to below:

The final code can be accessed from my GitHub repository:

GitHub - Nikilicious09/ActivityIndicatorSwiftUI

I hope you understood how to create a replica of the default iOS UIActivityIndicatorView. Do let me know if you have any queries or suggestions.