Circular progress in swift

Question

I am trying to make a simple circular progress bar in swift. What I have failed to do so far is, the progress should start at the top of the circle (at the moment it is starting at the 90 degree point). I would also like to have a circular line under the progress line that should be thicker than the progress line and have a different color as well..

Can anyone put me in the right direction towards my wishes?

Here is my function:

func animateView() {

let circle = viewProgress // viewProgress is a UIView

        var progressCircle = CAShapeLayer()

        let circlePath = UIBezierPath(ovalInRect: circle.bounds)

        progressCircle = CAShapeLayer ()
        progressCircle.path = circlePath.CGPath
        progressCircle.strokeColor = UIColor.greenColor().CGColor
        progressCircle.fillColor = UIColor.clearColor().CGColor
        progressCircle.lineWidth = 5.0

        circle.layer.addSublayer(progressCircle)

        let animation = CABasicAnimation(keyPath: "strokeEnd")
        animation.fromValue = 0
        animation.toValue = 1.5
        animation.duration = 1
        animation.fillMode = kCAFillModeForwards
        animation.removedOnCompletion = false

        progressCircle.addAnimation(animation, forKey: "ani")
    }

Igor this is how it looks:

Valora

Hello check out this round progressview that I have made. Here's the link: github.com/mariusfanu/MFRoundProgressView – Feune

Do not know how to implement it into my project as there is no code code except a small part in viewDidLoad(?).. Also cannot figure out how to animate that? – Valora

The problem is in CGPath. – Blimp

let circlePath = UIBezierPath(arcCenter: circle.center, radius: circle.bounds.midX, startAngle: -CGFloat(M_PI_2), endAngle: CGFloat(3.0 * M_PI_2), clockwise: true) // try this path – Blimp

@IgorBidiniuc that did make it go from position 12 o'clock.. But know it is not even near the view viewProgress in the viewcontroller? – Valora

@IgorBidiniuc I have added an image of how it looks. Any idea how to make it stay inside the view (the white box)? – Valora

@D.Finna, sorry for delay... so the problem is that your circle view don't have frame with origin (0,0) and it's center is not equal to center of bounds. Initializing circlePath with arcCenter equal with center of circle view bounds. Ex: CGPoint(x: circle.bounds.midX, y: circle.bounds.midY). developer.apple.com/reference/uikit/uibezierpath/1624358-init – Blimp

@IgorBidiniuc I could actually use more help from you, if you have time? I am trying to make a label display the percentage of the circular stroke as it goes along. Do you know how to do that? :-) – Valora

@D.Finna, animation.fromValue = 0; animation.toValue = 1.0; this mean from 0 percentage to 100 percentage. Play with this values. So, I'll not work for you, you are able to read about all in documentation. Good luck! – Blimp

Answer 1

For Swift 4

Declare two CAShapeLayers. One for actual circle and another for progress layer.

func createCircularPath() {
    let circleLayer = CAShapeLayer()
    let progressLayer = CAShapeLayer()
    
    let center = self.view.center
    let circularPath = UIBezierPath(arcCenter: center, radius: 100, startAngle: -.pi / 2, endAngle: 2 * .pi, clockwise: true)

    circleLayer.path = circularPath.cgPath
    circleLayer.fillColor = UIColor.clear.cgColor
    circleLayer.strokeColor = UIColor.lightGray.cgColor
    circleLayer.lineCap = .round
    circleLayer.lineWidth = 20.0  //for thicker circle compared to progressLayer

    progressLayer.path = circularPath.cgPath
    progressLayer.fillColor = UIColor.clear.cgColor
    progressLayer.strokeColor = UIColor.blue.cgColor
    progressLayer.lineCap = .round
    progressLayer.lineWidth = 10.0
    progressLayer.strokeEnd = 0

    view.addSublayer(circleLayer)
    view.addSublayer(progressLayer)

    let progressAnimation = CABasicAnimation(keyPath: "strokeEnd")
    progressAnimation.toValue = 1
    progressAnimation.fillMode = .forwards
    progressAnimation.isRemovedOnCompletion = false
    
    progressLayer.add(progressAnimation, forKey: "progressAnim")
}

Pogey

Answer 2

let progressView2 = CircularProgressView(frame: CGRect(x: 0, y: 0, width: 70, height: 70), lineWidth: 5, rounded: false)
    progressView2.progressColor = .blue
    progressView2.trackColor = .white
    progressView2.center = myView2.center
    progressView2.timeToFill = 0
    view.addSubview(progressView2)
    progressView2.progress = 0.9

Lifer

What is CircularProgressView? – Vietnamese

its a progress view but in circle – Lifer

But where does the class come from? It's not a class provided by Apple. No one can use your answer without knowing where to get the class. – Vietnamese