Circular Progress Bars with Indicator

Question

I am working on a circular progress bar that has an indicator on it. Also, the progress has to be animated. I was able to get the circular progress bar animated working by using CAShapeLayer, UIBezierPath and CABasicAnimation.

The problem is when I add the indicator to the circular progress bar and try to animated it, so the indicator would follow the circular progress bar animation, things got messed up.

Example: if I set my progress to be 75%, that everything works as expected. But if I set my progress to 76%, then the indicator finishes its animation before the progress bar.

This image is what I got so far:

What I really want to do:

See code below:

CGFloat progress = 0.76;

UIBezierPath *circlePath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.view.frame.size.width/2.0f, self.view.frame.size.height/2.0f)
                                                          radius:(150 * 0.5)
                                                      startAngle:DEGREES_TO_RADIANS(-90)
                                                        endAngle:DEGREES_TO_RADIANS((360 * progress) -90)
                                                       clockwise:YES];

CAShapeLayer *_circle = [CAShapeLayer layer];
_circle.path = circlePath.CGPath;
_circle.lineCap = kCALineCapSquare;
_circle.fillColor = [UIColor clearColor].CGColor;
_circle.strokeStart = 0;
_circle.zPosition = 1;

UIBezierPath *linePath = [UIBezierPath bezierPathWithRect:CGRectMake(0, -4, 4.0, 20.0)];

CAShapeLayer *_line = [CAShapeLayer layer];
_line.strokeColor = [UIColor redColor].CGColor;
_line.fillColor = [UIColor redColor].CGColor;
_line.path = linePath.CGPath;

[self.view.layer addSublayer:_circle];
[self.view.layer addSublayer:_line];

_circle.lineWidth   = 10.0f;
_circle.strokeColor = [UIColor colorWithRed:77.0 / 255.0 green:196.0 / 255.0 blue:122.0 / 255.0 alpha:1.0f].CGColor;

// Add Animation
CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
pathAnimation.duration = 1.0;
pathAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
pathAnimation.fromValue = @0.0f;
pathAnimation.toValue = @1.0f;
[_circle addAnimation:pathAnimation forKey:@"strokeEndAnimation"];
_circle.strokeEnd = 1.0f;

UIBezierPath *lineCirclePath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.view.frame.size.width/2.0f, self.view.frame.size.height/2.0f)
                                                          radius:(150 * 0.5)
                                                      startAngle:DEGREES_TO_RADIANS(-90)
                                                        endAngle:DEGREES_TO_RADIANS((360 * progress) -90)
                                                       clockwise:YES];

CAKeyframeAnimation *anim = [CAKeyframeAnimation animationWithKeyPath:@"position"];
anim.path = lineCirclePath.CGPath;
anim.rotationMode = kCAAnimationRotateAuto;
anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
anim.duration = 1.0;
anim.fillMode = kCAFillModeForwards;
anim.removedOnCompletion = NO;
[_line addAnimation:anim forKey:@"race"];

Answer 1

Why didn't you use a ready component for it, check the following progress controls