Fully customizable, circular progress bar written in Swift.
Example
To run the example project, clone the repo, and run pod install from the Example directory first. You can also view the example app at Appetize.io.
Usage
At the top of your file, make sure to import "ConcentricProgressRingView"
import ConcentricProgressRingView
Then, instantiate ConcentricProgressRingView in your view controller:
func viewDidLoad() {
super.viewDidLoad()
let fgColor1 = UIColor.yellow
let bgColor1 = UIColor.darkGray
let fgColor2 = UIColor.green
let bgColor2 = UIColor.darkGray
let rings = [
ProgressRing(color: fgColor1, backgroundColor: bgColor1, width: 18),
ProgressRing(color: fgColor2, backgroundColor: bgColor2, width: 18),
]
let margin: CGFloat = 2
let radius: CGFloat = 80
let progressRingView = ConcentricProgressRingView(center: view.center, radius: radius, margin: margin, rings: rings)
view.addSubview(progressRingView)
}
You can customize the width, margin, and radius, along with the number of rings. Here's another example with 6 progress rings, with a smaller bar width, larger margin between rings, and a larger radius:
let rings = [
ProgressRing(color: fgColor1, backgroundColor: bgColor1, width: 10),
ProgressRing(color: fgColor2, backgroundColor: bgColor2, width: 10),
ProgressRing(color: fgColor1, backgroundColor: bgColor1, width: 10),
ProgressRing(color: fgColor2, backgroundColor: bgColor2, width: 10),
ProgressRing(color: fgColor1, backgroundColor: bgColor1, width: 10),
ProgressRing(color: fgColor2, backgroundColor: bgColor2, width: 10),
]
let margin: CGFloat = 10
let radius: CGFloat = 120
let progressRingView = ConcentricProgressRingView(center: view.center, radius: radius, margin: margin, rings: rings)
Repeating widths can get a bit tedious, so you can omit them---but you'll still need to provide default values to the initializer. If you don't, the compiler will warn you that there's a problem. The initializer can throw if you provide invalid parameters, so you'll need to handle that.
let rings = [
ProgressRing(color: fgColor1, backgroundColor: bgColor1),
ProgressRing(color: fgColor2, backgroundColor: bgColor2),
ProgressRing(color: fgColor1, backgroundColor: bgColor1),
ProgressRing(color: fgColor2, backgroundColor: bgColor2),
ProgressRing(color: fgColor1, backgroundColor: bgColor1),
ProgressRing(color: fgColor2, backgroundColor: bgColor2),
]
let margin: CGFloat = 10
let radius: CGFloat = 120
let width: CGFloat = 8
let progressRingView = try? ConcentricProgressRingView(center: view.center, radius: radius, margin: margin, rings: rings, defaultColor: nil, defaultWidth: width)
Rings can have varying widths, colors, and background colors.
let rings = [
ProgressRing(color: UIColor(.RGB(160, 255, 0)), backgroundColor: UIColor(.RGB(44, 66, 4)), width: 40),
ProgressRing(color: UIColor(.RGB(255, 211, 0)), backgroundColor: UIColor(.RGB(85, 78, 0)), width: 20),
ProgressRing(color: UIColor(.RGB(255, 28, 93))),
]
let progressRingView = try! ConcentricProgressRingView(center: view.center, radius: radius, margin: margin, rings: rings, defaultWidth: 30)
Updating Progress
To animate a progress update, use setProgress.
ring.arcs[1].setProgress(0.5, duration: 2)
You can also use subscripts to access the individual arcs.
ring[1].setProgress(0.5, duration: 2)
If you just want to change the progress, just set the progress on the ring, and it'll change immediately.
ring[1].progress = 0.5
If you'd like to update multiple rings simulataneously, you can iterate over ConcentricProgressRingView since it conforms to SequenceType.
for ring in progressRingView {
ring.progress = 0.5
}
Requirements
Installation
ConcentricProgressRingView is available through CocoaPods. To install it, simply add the following line to your Podfile:
pod "ConcentricProgressRingView"
TODO
- Swift 3
- Documentation
- Tests
Author
Dan Loewenherz, [email protected]
License
ConcentricProgressRingView is available under the Apache 2.0 license. See the LICENSE file for more info.
5 Nov 4, 2022
445 Oct 13, 2022
42 Dec 5, 2022
25 Dec 7, 2022
31 Mar 10, 2021
2 Aug 18, 2022
13 Sep 24, 2022
2.4k Jan 6, 2023
9 Nov 5, 2022
392 Dec 17, 2022
3 Nov 26, 2022
18 Oct 11, 2022
183 Sep 17, 2022
25 Oct 10, 2022
3k Dec 27, 2022
1.3k Jan 6, 2023
1.9k Dec 23, 2022
54 Apr 15, 2022