How to make a custom semi-circular progress indicator with terminator? - swift

Question

I'd like to make a custom semi-circular inverted progress indicator that looks like this:
I've tried with CAShapeLayer for background, progress line and progress line terminator (small white circle). I'm using ring.strokeEnd = progress to define where the progress line ends.
How to add the line terminator to the end of progress line?
Here's my code (note: I've hardcoded the position for the small white circle, as I don't know how to properly implement this):
class AKBezierson: UIView {
var ringBackground: CAShapeLayer!
var ring: CAShapeLayer!
var ringTerminator: CAShapeLayer!
var innerRect: CGRect!
var radius: CGFloat { return min(innerRect.width, innerRect.height) / 2 }
var progress: CGFloat = 0.8 { didSet { updateLayerProperties() } }
private struct Const {
static let gap: CGFloat = 10
static let width: CGFloat = 3.0
}
override func layoutSubviews() {
super.layoutSubviews()
innerRect = CGRectInset(bounds, Const.width / 2 + Const.gap, Const.width / 2 + Const.gap)
let path = UIBezierPath()
path.addArcWithCenter(
CGPointMake(bounds.width / 2, bounds.height / 2),
radius: radius,
startAngle: CGFloat(0),
endAngle: CGFloat(M_PI),
clockwise: true)
if (ringBackground == nil) {
ringBackground = CAShapeLayer()
layer.addSublayer(ringBackground)
ringBackground.path = path.CGPath
ringBackground.fillColor = nil
ringBackground.lineWidth = Const.width
ringBackground.strokeColor = UIColor(white: 1.0, alpha: 0.5).CGColor
}
ringBackground.frame = ringBackground.bounds
if (ring == nil) {
ring = CAShapeLayer()
layer.addSublayer(ring)
ring.path = path.CGPath
ring.fillColor = nil
ring.lineWidth = Const.width
ring.strokeColor = UIColor.whiteColor().CGColor
ring.strokeEnd = progress
}
ring.frame = ring.bounds
if (ringTerminator == nil) { // small circle
ringTerminator = CAShapeLayer()
layer.addSublayer(ringTerminator)
let terminatorCircle = UIBezierPath(ovalInRect: CGRectMake(15, 83, 12, 12))
ringTerminator.path = terminatorCircle.CGPath
ringTerminator.fillColor = UIColor.whiteColor().CGColor
ringTerminator.lineWidth = Const.width
ringTerminator.strokeColor = UIColor.whiteColor().CGColor
}
ringTerminator.frame = ringTerminator.bounds
updateLayerProperties()
}
func updateLayerProperties () {
if !(ring == nil) {
ring.strokeEnd = progress
}
}
}
I've also tried to calculate the point where the progress line ends and move the line terminator to a new position every time the progress changed, but I was not satisfied with the animation since the terminator was trying to reach the new position following the shortest (strait) path.