Search code examples
swiftanimationprogress-barloading

Is there any way to make circular progress bar beyond 100%?


At first I've think to use pie chart but then it clicked me to use circular progress instead and now it need to go beyond 100%.

Is there any way to modify any existing circular progress bar SDK for swift or any alternate way to achieve this behaviour?

How about using Donut Graph or something?

Edit: It is gif, that is attached. Don't know why it's not playing as gif should! (you can check out by clicking on it)

enter image description here


Solution

  • End up using KDCircularProgress for this.

    import KDCircularProgress // I'm using (1.5.4)
    
    @IBOutlet weak var progress: UIView!
    
    private var progressBar: KDCircularProgress?
    private var totalPer = 120.0
    
    private func setupProgressUI() {
            let progress = KDCircularProgress(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
            self.progress.addSubview(progress)
            progress.startAngle = -90
            progress.progressThickness = 0.8
            progress.trackThickness = 0.8
            progress.trackColor = .darkGray
            progress.roundedCorners = true
            progress.set(colors: UIColor.orange)
            progress.translatesAutoresizingMaskIntoConstraints = false
            progress.leadingAnchor.constraint(equalTo: self.progress.leadingAnchor).isActive = true
            progress.trailingAnchor.constraint(equalTo: self.progress.trailingAnchor).isActive = true
            progress.topAnchor.constraint(equalTo: self.progress.topAnchor).isActive = true
            progress.bottomAnchor.constraint(equalTo: self.progress.bottomAnchor).isActive = true
            self.progressBar = progress
    }
    
    private func setupProgressData() {
        self.progressBar?.trackColor = .darkGray
        self.setProgress(percentage: self.totalPer)
    }
    
    private func setProgress(percentage: Double) {
        var percentage = percentage
        if percentage > 100 {
            percentage -= 100
            self.progressBar?.animate(fromAngle: 0, toAngle: 360, duration: 2) { isComplete in
                if isComplete && percentage > 0 {
                    self.progressBar?.trackColor = UIColor.orange.withAlphaComponent(0.75)
                    self.setProgress(percentage: percentage)
                }
            }
        } else {
            self.progressBar?.animate(fromAngle: 0, toAngle: percentage * 3.6, duration: 2, completion: nil)
        }
    }
    

    enter image description here