SwiftUI package that creates an animated circular progress bar
In Xcode go to File -> Swift Packages -> Add Package Dependency 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)
Import the package into the file with import CircularProgress
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)
}
}
}| 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 | Color or Gradient | 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 | Choosing whether the text at the centre is displayed or not | true |
