SRCircleProgress

Customizable circle progress bar written in Swift.

Installation

Requirements

• iOS13.0+

CocoaPods

SRCircleProgress is available through CocoaPods. To install it, add the following to your Podfile:

pod 'SRCircleProgress'

Swift Package Manager

SRCircleProgress is also available through Swift Package Manager. Add SRCircleProgress as a dependency to your Package.swift:

.package(url: "https://github.com/Ryu0118/SRCircleProgress", from: "0.2.1")

Usage

The basic usage is as follows.

let circleProgressView = SRCircleProgress(frame: .zero)
circleProgressView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(circleProgressView)

NSLayoutConstraint.activate([
    circleProgressView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
    circleProgressView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
    circleProgressView.widthAnchor.constraint(equalToConstant: 150),
    circleProgressView.heightAnchor.constraint(equalToConstant: 150),
])

To set the progress on the progress bar,

circleProgressView.setProgress(0.5, animated: true)

The current progress is represented by a floating-point value between 0.0 and 1.0, inclusive, where 1.0 indicates the completion of the task. The default value is 0.0. Values less than 0.0 and greater than 1.0 are pinned to those limits.

Properties

circleProgressView.progress = 0.6 // Set the progress without animation.
circleProgressView.isReverse = false // Reverse the direction of the color to be filled.
circleProgressView.percent = 60 // Set the percent without animation
circleProgressView.progressLineColor = .systemBlue // The color shown for the portion of the progress view that is filled.
circleProgressView.progressLineWidth = 6 // Specifies the line width of the progress view.
circleProgressView.backgroundLineWidth = 12 // Specifies the line width of the view behind the progress view.
circleProgressView.animationDuration = 0.2 // Specifies the duration of the animation when setProgress(_:animated:) is executed
circleProgressView.progressAngle = .lowerLeftToLowerRight(offset: 0) // Change the shape of the progress view

To change the shape of the progress view, use the progressAngle property. Possible values for progressAngle are as follows

enum ProgressAngle {
    case topToTop
    case bottomToBottom
    case lowerLeftToLowerRight(offset: Double = 0)
    case leftToRight(offset: Double = 0)
}

topToTop	bottomToBottom
leftToRight(offset = 0)	lowerLeftToLowerRight(offset = 0)