CircularProgress

SwiftUI package that creates an animated circular progress bar

Installation: It requires at least iOS 15, iPadOS 15, macOS 12 and Xcode 13!

In Xcode go to File -> Add Packages... and paste in the repo’s url: https://github.com/ArnavMotwani/CircularProgressSwiftUI.git then either select a version or the main branch

I will update the main branch more frequently with minor changes, while the version will only increase with significant changes.

There also a branch called iOS13 which supports iOS 13+ and macOS 10_15+

Usage:

Import the package into the file with import CircularProgress

Example:

Here is how the default view, with no customizations, can be implemented

import SwiftUI
import CircularProgress

struct ContentView: View {
    @State var count = 0
    let total = 10
    var progress: CGFloat{
        return CGFloat(count)/CGFloat(total)
    }
    var body: some View {
        VStack {
            CircularProgressView(count: count, total: total, progress: progress)
                .padding(50)
            HStack{
                Button("Decrease", action: {self.count -= 1})
                Spacer()
                Button("Increase", action: {self.count += 1})
            }
            .padding(50)
        }
    }
}

Fill Customization:

The Progress Bar can be filled with a Linear or an Angular Gradient. By default the fill is LinearGradient(gradient: Gradient(colors: [Color.green, Color.blue]), startPoint: .top, endPoint: .bottom) however you can pass a custom Linear or Angular Gradient to the fill Parameter.

Parameters:

parameter	optional?	type	description	default
count	required	Int	Current value (larger text in the centre)	-
total	required	Int	Total value (smaller text in the centre)	-
progress	required	CGFloat	Progress of the bar	-
fontOne	optional	Font	Font of larger text in the centre	Font.system(size: 75, weight: .bold, design: .rounded)
fontTwo	optional	Font	Font of smaller text in the centre	Font.system(size: 25, weight: .bold, design: .rounded)
colorOne	optional	Color	Color of larger text in the centre	Color.primary
colorTwo	optional	Color	Color of smaller text in the centre	Color.gray
fill	optional	LinearGradient or AngularGradient	Fill of the progress bar	LinearGradient(gradient: Gradient(colors: [Color.green, Color.blue]), startPoint: .top, endPoint: .bottom)
lineWidth	optional	CGFloat	Width of the progress bar	25.0
lineCap	optional	CGLineCap	The line cap at the end of the progress bar	CGLineCap.round
showText	optional	Bool	Choose whether the text at the centre is displayed or not	true
showBottomText	optional	Bool	Choose whether the bottom text in the centre is visible (if showText is true)	true

Examples

fontOne

CircularProgressView(count: count, total: total, progress: progress, fontOne: Font.title.bold())

---

fontTwo

CircularProgressView(count: count, total: total, progress: progress, fontTwo: Font.title2)

---

colorOne

CircularProgressView(count: count, total: total, progress: progress, colorOne: Color.blue)

---

colorTwo

CircularProgressView(count: count, total: total, progress: progress, colorTwo: Color.blue)

---

fill

CircularProgressView(count: count, total: total, progress: progress, fill: LinearGradient(gradient: Gradient(colors: [Color.red, Color.blue]), startPoint: .leading, endPoint: .trailing))

---

lineWidth

CircularProgressView(count: count, total: total, progress: progress, lineWidth: 50)

---

lineCap

CircularProgressView(count: count, total: total, progress: progress, lineCap: CGLineCap.square)

---

showText

CircularProgressView(count: count, total: total, progress: progress, showText: false)

---

showBottomText

CircularProgressView(count: count, total: total, progress: progress, showBottomText: false)
}