Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/arnavmotwani/circularprogressswiftui
SwiftUI package that creates an animated circular progress bar
https://github.com/arnavmotwani/circularprogressswiftui
2020 indie ios macos package swift swift-package-manager swiftui xcode
Last synced: about 3 hours ago
JSON representation
SwiftUI package that creates an animated circular progress bar
- Host: GitHub
- URL: https://github.com/arnavmotwani/circularprogressswiftui
- Owner: ArnavMotwani
- License: mit
- Created: 2020-11-28T10:29:41.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-01-08T10:53:43.000Z (over 2 years ago)
- Last Synced: 2024-09-27T08:04:08.753Z (about 3 hours ago)
- Topics: 2020, indie, ios, macos, package, swift, swift-package-manager, swiftui, xcode
- Language: Swift
- Homepage:
- Size: 5.61 MB
- Stars: 67
- Watchers: 4
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# 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
```swift
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
```swift
CircularProgressView(count: count, total: total, progress: progress, fontOne: Font.title.bold())
```
---
#### fontTwo
```swift
CircularProgressView(count: count, total: total, progress: progress, fontTwo: Font.title2)
```
---
#### colorOne
```swift
CircularProgressView(count: count, total: total, progress: progress, colorOne: Color.blue)
```
---
#### colorTwo
```swift
CircularProgressView(count: count, total: total, progress: progress, colorTwo: Color.blue)
```
---
#### fill
```swift
CircularProgressView(count: count, total: total, progress: progress, fill: LinearGradient(gradient: Gradient(colors: [Color.red, Color.blue]), startPoint: .leading, endPoint: .trailing))
```
---
#### lineWidth
```swift
CircularProgressView(count: count, total: total, progress: progress, lineWidth: 50)
```
---
#### lineCap
```swift
CircularProgressView(count: count, total: total, progress: progress, lineCap: CGLineCap.square)
```
---
#### showText
```swift
CircularProgressView(count: count, total: total, progress: progress, showText: false)
```
---
#### showBottomText
```swift
CircularProgressView(count: count, total: total, progress: progress, showBottomText: false)
}
```