title: Circular Progress Bar with CAShapeLayer and CABasicAnimation
body: <p>I am trying to make Circular Progress View using the idea from <a href="https://stackoverflow.com/questions/26578023/animate-drawing-of-a-circle">here</a></p>
  
  <p>This is my code for the CircleView:</p>
  
  <pre><code>#import "CircleView.h"
  
  @interface CircleView()
  
  @property (nonatomic, strong) CAShapeLayer *circleLayer;
  
  @end
  
  @implementation CircleView
  
  -(instancetype)initWithFrame:(CGRect)frame {
  self = [super initWithFrame:frame];
  
  if (self) {
      self.backgroundColor = UIColor.clearColor;
  
      UIBezierPath *circlePath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.frame.size.width / 2., self.frame.size.height / 2.0) radius: (self.frame.size.width - 10) / 2 startAngle:0.0 endAngle:M_PI * 2 clockwise:YES];
  
      CAShapeLayer *downLayer = [[CAShapeLayer alloc] init];
      downLayer.path = circlePath.CGPath;
      downLayer.fillColor = UIColor.clearColor.CGColor;
      downLayer.strokeColor = UIColor.lightGrayColor.CGColor;
      downLayer.lineWidth = 10.0;
  
      downLayer.strokeEnd = 1.0;
  
      self.circleLayer = [[CAShapeLayer alloc] init];
      self.circleLayer.path = circlePath.CGPath;
      self.circleLayer.fillColor = UIColor.clearColor.CGColor;
      self.circleLayer.strokeColor = UIColor.redColor.CGColor;
      self.circleLayer.lineWidth = 10.0;
  
      self.circleLayer.strokeEnd = 0.0;
  
      [self.layer addSublayer:downLayer];
      [self.layer addSublayer: self.circleLayer];
  }
  
  return self;
  }
  
  -(void)animateCircle:(NSTimeInterval)duration fromPart:(CGFloat)fromPart toPart: (CGFloat)toPart {
  
  CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
  
  animation.duration = duration;
  
  animation.fromValue = @(fromPart);
  animation.toValue = @(toPart);
  
  animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
  
  self.circleLayer.strokeEnd = toPart;
  
  [self.circleLayer addAnimation:animation forKey:@"animateCircle"];
  
  }
  
  @end
  </code></pre>
  
  <p>The problem is when I try to make this animation more than once. Then it shows only the animation from the last call and as if the previous calls have already finished animating. For example if I make the following two calls:</p>
  
  <pre><code>[self.circleView animateCircle:1 fromPart:0.0 toPart:0.25];
  [self.circleView animateCircle:1 fromPart:0.25 toPart:0.5];
  </code></pre>
  
  <p>It will show only animating the colouring from 0.25 percentage of the circle to 0.5 percentage of the circle. Can I change that? I need to show all animations one after another. (Need to show the progress of a download)</p>