SwiftUI has built-in progress bar which comes in two flavors, circular and linear but if you are looking for a gradient progress bar then you will have to build one yourself.
Given its SwiftUI, its needless to say that even creating custom progress bar is much simpler and takes minutes to build up from scratch.
Today, we will be building a circular progress control from ground up. Here is what we will have by the end of this article:
Let’s get started. We will add a new SwiftUI view and call it “CustomProgressView.swift”
We will need a binding variable to show progress on this view so we will add variable called “progress”. Our view will look something like this:
import SwiftUIstruct CustomProgressView: View {
@Binding var progress: CGFloat
}
}
Notice @Binding variable, this will allow our view to receive progress value from the parent view and our progress will be displayed on the screen.
Next we will add two circles in ZStack. Because we are using ZStack and content stacks on top of each other in z-index, first circle…
