ArnavMotwani/CircularProgressSwiftUI

Usage:

Import the package into the file with import CircularProgress

Example:

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

<p float="center"> <img src="./Gifs/example.gif" width="200" /> </p>

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

<p float="center"> <img src="./Images/FontOne.png" /> </p>

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

fontTwo

<p float="center"> <img src="./Images/FontTwo.png" /> </p>

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

colorOne

<p float="center"> <img src="./Images/ColorOne.png" /> </p>

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

colorTwo

<p float="center"> <img src="./Images/ColorTwo.png" /> </p>

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

fill

<p float="center"> <img src="./Images/Fill.png" /> </p>

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

lineWidth

<p float="center"> <img src="./Images/LineWidth.png" /> </p>

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

lineCap

<p float="center"> <img src="./Images/LineCap.png" /> </p>

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

showText

<p float="center"> <img src="./Images/ShowText.png" /> </p>

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

showBottomText

<p float="center"> <img src="./Images/ShowBottomText.png" /> </p>

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

Package Metadata

Repository: ArnavMotwani/CircularProgressSwiftUI

Stars: 74

Forks: 7

Open issues: 0

Default branch: main

Primary language: swift

License: MIT

Topics: 2020, indie, ios, macos, package, swift, swift-package-manager, swiftui, xcode

README: README.md