title: How can I centre a circular progress bar in a UIView using Swift?
body: <p>I'm having quite a bit of difficulty simply ensuring a circular progress bar is always in the centre of the <code>UIView</code> it is associated to. </p>
  
  <p>This is what is happening: </p>
  
  <p><a href="https://i.stack.imgur.com/kuAsK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kuAsK.png" alt="enter image description here"></a></p>
  
  <p>Ignore the grey region, this is simply the <code>UIView</code> on a placeholder card. The red is the <code>UIView</code> I have added as an outlet to the <code>UIViewController</code>.</p>
  
  <p>Below is the code for the class that I have made:</p>
  
  <pre><code>class CircleProgress: UIView {
  
      override init(frame: CGRect) {
          super.init(frame: frame)
          setupView()
      }
  
      required init?(coder aDecoder: NSCoder) {
          super.init(coder: aDecoder)
          setupView()
      }
  
      var progressLyr = CAShapeLayer()
      var trackLyr = CAShapeLayer()
  
      var progressClr = UIColor.red {
         didSet {
            progressLyr.strokeColor = progressClr.cgColor
         }
      }
  
      var trackClr = UIColor.black {
         didSet {
            trackLyr.strokeColor = trackClr.cgColor
         }
      }
  
      private func setupView() {
          self.backgroundColor = UIColor.red
  
          let centre = CGPoint(x: frame.size.width/2, y: frame.size.height/2)
  
          let circlePath = UIBezierPath(arcCenter: centre,
                                        radius: 10,
                                        startAngle: 0,
                                        endAngle: 2 * CGFloat.pi,
                                        clockwise: true)
  
          trackLyr.path = circlePath.cgPath
          trackLyr.fillColor = UIColor.clear.cgColor
          trackLyr.strokeColor = trackClr.cgColor
          trackLyr.lineWidth = 5.0
          trackLyr.strokeEnd = 1.0
  
          layer.addSublayer(trackLyr)
      }
  }
  </code></pre>
  
  <p>The aim is simply to have all 4 edges of the black circle touching the edges of the red square.</p>
  
  <p>Any help is hugely appreciated. I'm thinking it must be too obvious but this has cost me too many hours tonight. :)</p>