title: Incorrect position of CAShapeLayer
body: <p>I have a <code>UIView</code> called <code>viewProgress</code>. It is the white box in the image. I want a circular progress bar, which is the green circle in the image. The progress bar should stay within the white box, but as you can see it is way off. </p>
  
  <p>How do I make it stay inside the <code>viewProgress</code>?
  Here you have my animation function:</p>
  
  <pre><code>func animateView() {
  
          let circle = viewProgress // viewProgress is a UIView
  
          var progressCircle = CAShapeLayer()
  
          let circlePath = UIBezierPath(arcCenter: circle.center, radius: circle.bounds.midX, startAngle: -CGFloat(M_PI_2), endAngle: CGFloat(3.0 * M_PI_2), clockwise: true)
  
          progressCircle = CAShapeLayer ()
          progressCircle.path = circlePath.CGPath
          progressCircle.strokeColor = UIColor.whiteColor().CGColor
          progressCircle.fillColor = UIColor.clearColor().CGColor
          progressCircle.lineWidth = 10.0
  
          circle.layer.addSublayer(progressCircle)
  
          let animation = CABasicAnimation(keyPath: "strokeEnd")
          animation.fromValue = 0
          animation.toValue = 0.4
          animation.duration = 1
          animation.fillMode = kCAFillModeForwards
          animation.removedOnCompletion = false
  
          progressCircle.addAnimation(animation, forKey: "ani")
      }
  </code></pre>
  
  <p>And I'm just calling the function inside <code>viewDidLoad()</code></p>
  
  <p><a href="https://i.stack.imgur.com/8aMGi.png" rel="nofollow"><img src="https://i.stack.imgur.com/8aMGi.png" alt="enter image description here"></a></p>