CircularProgress

1.2.2

SwiftUI package that creates an animated circular progress bar
ArnavMotwani/CircularProgressSwiftUI

What's New

Version 1.2.2

2022-01-08T10:55:09Z

Updated Swift Tools Version that may have caused build issues with the project

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)
}

Description

  • Swift Tools 5.5.0
View More Packages from this Author

Dependencies

  • None
Last updated: Wed Nov 09 2022 00:16:53 GMT-0500 (GMT-05:00)