Custom Circular Progress Bar in SwiftUI

Uplift iOS Interview

"Uplift iOS Interview" is a comprehensive guide to help aspiring iOS developers soar to new heights in their careers. This book is an indispensable tool for anyone looking to crack the iOS interview and impress their future employers with their technical prowess. With in-depth coverage of Swift, AutoLayout, SwiftUI, Multithreading, Memory management so on and so forth, this book is a treasure trove of knowledge for anyone looking to uplift their iOS development career.

I want this

Circular progress bars, also known as donut charts, are a common visual element used to display progress or completion percentage in a circular format. In SwiftUI, you can create a custom circular progress bar by combining different views and applying transformations to them.

Here is an example of how you could create a custom circular progress bar in SwiftUI:

struct CircularProgressBar: View {
    @Binding var progress: Double
    var size: CGFloat = 200

    var body: some View {
        ZStack {
            Circle()
                .stroke(Color.secondary, style: StrokeStyle(lineWidth: 10))
                .frame(width: size, height: size)

            Circle()
                .trim(from: 0, to: CGFloat(min(progress, 1)))
                .stroke(Color.primary, style: StrokeStyle(lineWidth: 10, lineCap: .round))
                .frame(width: size, height: size)
                .rotationEffect(Angle(degrees: -90))
                .animation(.linear)

            Text("\(Int(progress * 100))%")
                .font(.title)
                .foregroundColor(.primary)
        }
    }
}

This code creates a CircularProgressBar struct that conforms to the View protocol and has a @Binding variable called progress that is used to track the progress of the bar, and a size variable that determines the size of the bar.

The body of the CircularProgressBar consists of a ZStack with three views: a circle for the track, a circle for the progress, and a text label for the progress percentage.

The track circle is created using the Circle view and is styled with a secondary color and a line width of 10 points. The progress circle is created using the Circle view and is styled with a primary color, a line width of 10 points, and a line cap of .round. The trim modifier is used to trim the progress circle from 0 to the progress value, and the rotationEffect modifier is used to rotate the circle by -90 degrees so that it starts at the top. The animation modifier is used to animate the progress circle smoothly.

The text label is created using the Text view and displays the progress percentage as an integer.

To use the CircularProgressBar, you simply need to pass a binding to a Double variable as the progress argument and specify the size of the bar as the size argument. The CircularProgressBar will automatically update the progress and percentage based on the value of the progress variable.

You can customize the appearance and behavior of the CircularProgressBar by using different views and properties. For example, you could add a gradient fill to the progress circle, or use a different shape or color for the track or text label. You could also add a gesture or animation to the CircularProgressBar to make it more interactive.

struct ContentView: View {
    @State var progress = 0.2
    var body: some View {
        VStack {
            CircularProgressBar(progress: $progress)
        }
        .padding()
    }
}

Rev Up Your iOS Skills: Take a Dynamic Learning Journey

iOS Career Boost is the ultimate learning journey to elevate your iOS development career through a dynamic blend of visual learning, handy cheat sheets, coding practice materials, and expertly curated tips and tricks

Get Ready to Shine: Mastering the iOS Interview

• Uplift iOS Interview - A Comprehensive Guide to iOS Interview
• Xcode Cheat Sheet for Swift
• Xcode Cheat Sheet for SwiftUI

Enjoying the articles? Get the inside scoop by subscribing to my newsletter.

Get access to exclusive iOS development tips, tricks, and insights when you subscribe to my newsletter. You'll also receive links to new articles, app development ideas, and an interview preparation mini book. Your email address will only be used for the purpose of sending the newsletter and will not be shared with third parties or advertisers. Rest assured that we value your privacy and will not spam your inbox.

Connect with me on

Twitter and LinkedIn and don't hesitate to reach out with any questions about this post. Thank you for reading.