luispadron / uicircularprogressring Goto Github PK

I have the following setup. But the animation is not working it just appears on the screen. Any clue on what I am doing wrong?

let profileProgressView: UICircularProgressRingView = {
   
    let view = UICircularProgressRingView(frame: CGRect(x: 0, y: 0, width: 124, height: 124))
    view.maxValue = 100
    view.outerRingColor = UIColor.white
    view.innerRingColor = UIColor.white
    view.viewStyle = 2
    view.startAngle = 90
    view.outerRingCapStyle = 2
    view.outerRingWidth = 8
    view.shouldShowValueText = false
    view.translatesAutoresizingMaskIntoConstraints = false
    return view
    
}()

func setConstraints() {
    profileProgressView.topAnchor.constraint(equalTo: profileBackgroundView.topAnchor, constant: 8).isActive = true
    profileProgressView.centerXAnchor.constraint(equalTo: profileBackgroundView.centerXAnchor).isActive = true
    profileProgressView.widthAnchor.constraint(equalToConstant: 124).isActive = true
    profileProgressView.heightAnchor.constraint(equalToConstant: 124).isActive = true
}

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    
    delay(2.5, completion: {
        self.profileProgressView.setProgress(value: 60, animationDuration: 5, completion: nil)
    })
}

func delay(_ seconds: Double, completion:@escaping ()->()) {
    let popTime = DispatchTime.now() + Double(Int64( Double(NSEC_PER_SEC) * seconds )) / Double(NSEC_PER_SEC)
    
    DispatchQueue.main.asyncAfter(deadline: popTime) {
        completion()
    }
}

I have the control inside my custom UICollectionViewCell, loaded from a XIB. When I set the progress it doesn't animate, just set the color to that value without animation, but after the animation time the completion callback is called. The setProgress is called inside the cellForItemAt callback of the UICollectionView.

Tried to set the value in different ways and also call setNeedsDisplay before and after the setProgress. None of this works.

I'm missing something in order to make this work properly?

Hi,
Thanks for this library. In my project, I have to set different value to valueLabel, in example "45+".
But because of private, it can't be done.

lazy private var valueLabel: UILabel = UILabel(frame: CGRect(x: 0, y: 0, width: 0, height: 0))

Could you add this improvement please.

Thank you.

READ BEFORE POSTING AN ISSUE

Not following these guidelines may result in me ignoring or closing your issue, please carefully read and submit an appropriate issue as it helps with time and fixes.

Please provide the current version of the library you are using

• Version =

Have you read the documentation?

• Yes

• No

  If no, read the docs here before posting an issue

Is it a bug? Provide the following

• Detailed overview of what you are trying to accomplish
• What is the expected outcome?
• What is the actualy outcome?
• Either post sample code, or example project where isssue can be recreated

Is it a question? Provide the following

• Has it be answered here before?
• Be detailed and describe the question in detail
• If it's a question about something that is happening within your code base, either post a small amount of code, email me project if you want to keep it private, or post an example project where I can try to assist
• Please do your own research before posting any questions which may have been asked on StackOverFlow before.
• Make sure to communicate back and keep issue updated or it will be closed

Is it a feature request? Provide the following

• Does it make sense to put this in the project? Why
• Is it something that can be done in a reasonable amount of time?
• Will it effect anyone currently using the lib?
• Have you tried to implement this and submit a pull request, if no, why not?

If you have read all of this please follow the template and post the issue. Thanks for using UICiruclarProgressRing.

Hi!

Great work!
I am working with version 1.6.2 and I read the documentation.

I am using setProgress with an animationDuration.
When I set it to 30 seconds, the actual timespan it needs to finish is too small. It finishes about 5 seconds too early. I timed it on a real device (iPhone 5S) and on the emulator. Same result.

Thank you!

I have a button and when it is pressed stuff on screen happens and the progress ring starts. The idea is that when the progress ring is animating the user can't press the button. I originally had this code:

func animateCircularProgressView(delayTime: Int) {
        
    button.isUserInteractionEnabled = false
        
    progressRing.setProgress(value: 100, animationDuration: TimeInterval(delayTime)) {
        self.progressRing.setProgress(value: 0, animationDuration: 0, completion: nil)
        self.button.isUserInteractionEnabled = true
    }
        
}

which works to stop the user pressing the button whilst the timer is on but what I would rather is for when the button is clicked to reset the animation. I have this:

var timerIsOn: Bool = false

@IBAction func btnTapped(_ sender: AnyObject) {
    if timerIsOn {
        //playErrorSound()
        animateCircularProgressView(delayTime: time)
    } else {
         // do button stuff
    }
}

    
func animateCircularProgressView(delayTime: Int) {
        
    timerIsOn = true
        
    progressRing.setProgress(value: 100, animationDuration: TimeInterval(delayTime*2)) {
        self.progressRing.setProgress(value: 0, animationDuration: 0, completion: nil)
        self.timerIsOn = false
    }
        
}

But this just makes the timer disappear. Is there an easy way to just reset it whenever the button is pressed whilst it is animating?

I added manually those files as per docs, but, it showing 'No such module' while trying to import, Can you suggest, how to fix this issue?

how can i implement this? start the ring from top, not from 45 degree/right
thanks

Hi, i'm just making a simple timer for my fitness app with your api. And it works really well, but i've included functionality in my timer for when the app goes into the background and the user returns the timer continues but there's no animation for the progress ring. Just wondering what i'm doing wrong. Here's the code:

class TimerViewController: UIViewController, UICircularProgressRingDelegate {

@IBOutlet weak var timerView: UICircularProgressRingView!
@IBOutlet weak var timerLabel: UILabel!
@IBOutlet weak var timerTextField: UITextField!

    let center = UNUserNotificationCenter.current()
    let notificationCenter = NotificationCenter.default

   var backgroundDate: Date?
   var totalTime: Double = 5.0
   var timer = Timer()

 override func viewDidLoad() {
        super.viewDidLoad()
        notificationCenter.addObserver(self, selector: #selector(appMovedToBackground), name: Notification.Name.UIApplicationDidEnterBackground, object: nil)
    }
    
    func appMovedToBackground() {
        
        if totalTime > 1 {
        
        timer.invalidate()
        
        let content = UNMutableNotificationContent()
        content.title = "Rest Period Finished!"
        content.body = "Get ready for your next set"
        content.sound = UNNotificationSound.default()
        
        let trigger = UNTimeIntervalNotificationTrigger.init(
            timeInterval: TimeInterval(totalTime),
            repeats: false)
        
        let request = UNNotificationRequest(identifier: "restPeriod", content: content, trigger: trigger)
        center.add(request)
        
        backgroundDate = Date.init()
        
        notificationCenter.addObserver(self, selector: #selector(appReturnedFromBackground), name: Notification.Name.UIApplicationWillEnterForeground, object: nil)
        }
    }
    
    func appReturnedFromBackground() {
        if backgroundDate != nil {
        let returnDate = Date.init()
        
        let difference = returnDate.timeIntervalSince(backgroundDate!)
        
        if Double(difference) > totalTime {
            timer.invalidate()
            timerView.setProgress(value: 0, animationDuration: 0)
            timerLabel.text = "00"
            totalTime = 1
            start.isEnabled = true
            
            _ = self.navigationController?.popViewController(animated: true)
        } else {
            timer.invalidate()
            
            center.removePendingNotificationRequests(withIdentifiers: ["restPeriod"])
            
            let totalTimeLeft = totalTime - Double(difference)
            totalTime = totalTimeLeft
            
            timer = Timer.scheduledTimer(timeInterval: 1, target: self, selector: #selector(TimerViewController.counter), userInfo: nil, repeats: true)
            
            timerView.animationStyle = kCAMediaTimingFunctionLinear
            
            timerView.setProgress(value: 270, animationDuration: Double(totalTime)) {
                self.timerView.setProgress(value: 0, animationDuration: 0)
            }
            
            timerLabel.text = String(totalTime)
        }
            
        }
    }

    @IBAction func startButton(_ sender: Any) {
        
        timer = Timer.scheduledTimer(timeInterval: 1, target: self, selector: #selector(TimerViewController.counter), userInfo: nil, repeats: true)
        
        timerView.animationStyle = kCAMediaTimingFunctionLinear
        
        timerView.setProgress(value: 270, animationDuration: Double(minutes + seconds)) {
        }
        
        totalTime = Double(textField.text!)
        timerLabel.text = String(totalTime)
        }
    
    
    @IBAction func stopButton(_ sender: Any) {
        timerLabel.text = "00"
        timer.invalidate()
        totalTime = 0
    }
    
    func finishedUpdatingProgress(forRing ring: UICircularProgressRingView) {
        timerView.setProgress(value: 0, animationDuration: 0)
    }
    
    deinit {
        center.removePendingNotificationRequests(withIdentifiers: ["restPeriod"])
        notificationCenter.removeObserver(self, name: Notification.Name.UIApplicationDidEnterBackground, object: nil)
        notificationCenter.removeObserver(self, name: Notification.Name.UIApplicationWillEnterForeground, object: nil)
        print("Class destroyed")
    }
}

Thanks

I want to implement a timer component into my app. I'm just confused on how to go about doing it with this library.

How to set minimum value to show custom range value?

I want to show range between 250 - 500,
How can I show that?

Thank you,

My view contains a button, after buttonTap I want to speed up the ring starting now like as

ring.setProgress(value: ring.currentValue, animationDuration: 5 , completion: nil)

Function animate with duration is not working on second basis. It animates so quickly. Want it to animate per second. Want to implement it in quiz app as a countdown timer.
Please help.
And i know, Github is not for doubts. But, don't have any other option. It's damn urgent. Sorry. Please help.

How would I pull a different version (Version 1.5.5) from cocoapods I want to know because 8.3.3 xcode doesn't support swift 4 and thats the version where swift 3 is still supported

Do you use this library?

Hey everyone, thanks for using this library and helping me build it!

If you're using the library in a readily available application and would like to show it off,
post a comment with a link to your application!

I'll feature a compilation on the homepage of the library once a list is curated.

How can I have it start with say 30 seconds and instead of a % its a countdown until its done

I cannot use this on a new app I am building because our client wants our app to work with both iOS9 and iOS10. Is iOS 10, necessary for this pod? I see that in your pod spec.

When I run pod install with:
platform :ios, '9.0'

I get an error about UICircularProgressRingrequired a higher minimum deployment target.

If i run this with
platform :ios, '10.0'

I can install properly

• Version = UICircularProgressRing (1.4.2)

Is it possible to restart the progress? First time, it works fine. But i want restart progress by clicking button.
I've called setProgress func again but it doesnt work.
I appreciate any help

Hello,
Just for feature request, I think we also need to support multiline value indicator.

Thank you,

In your example image, how did you achieve the 'bordered' effect in the '83%' example?

I'm setting the outer and inner ring colours, but I'm unable to set the 'track' colour to be of a different colour.

Thanks!

• Version = 1.6.1

Have you read the documentation?

• Yes
• No

Is it a bug?

I am not sure that it's bug

Is it a question? Provide the following

In my app, I am using UICircularProcessing. It is working really good and easy to understand. Good job!
However, I need to do something with property currentValue but it is not working. Maybe, I am not using it correctly. I have read all your doc and code, but still need your help.

In my app, I have a label that I want to update each time the UICircularProcessing made a progress. So as I read in your doc, property currentValue can give this information in realtime. But I didn't succeed with it. Below I share with you a small code on how I am trying to do that, I am certainly not using it in the correct way :-)

`

    circularProgressView.setProgress(value: 535, animationDuration: 10)
    DispatchQueue.global(qos: .background).async {
        while self.circularProgressView.isAnimating {
            print(self.circularProgressView.currentValue!)
        }
    }

`

So if I understand well, during animation I should get the progression of the currentValue in realtime. But the print gives me always the same value, until animation stops.

Thanks in advance for your help.

I'd like to be able to put a unit for the text inside the circular progress view like "GB" as you have it on the main page. How can I achieve this?

• Version = v1.6.1
• XCode 8.3.3

v1.6.1 builds failed through Carthage because of Swift Language Version set to Swift 4 which is not supported by XCode 8.3.3.

XCode 8.3.3 does not support Swift 4 obviously.
It'd better create a beta branch for XCode 9 testing and Swift 4 testing. And then it would not affect the final release. :)

I have a weird issue. I have the control inside my custom UICollectionViewCell, loaded from a XIB. When I set the progress it doesn't animate, just set the color to that value without animation, but after the animation time the completion callback is called.

Tried to set the value in different ways and also call setNeedsDisplay before and after the setProgress.

The new version of setProgress(value:animationDuration:completion:) specifies that the completion block defaults to nil which would not break anything, but it doesn't actually have a default value which means you have to add completion: nil anywhere you call setProgress.

• I used start angel as -90 & my value range is 0-100.

When i try to set progress value as 50 then Circle is not half but more than half as shown below.

but if I set start angel as default then it works fine.

Please provide the current version of the library you are using

• Version = 1.4.2

Have you read the documentation?

• Yes
• No

Bug

I was using the library with startAngle = 45 and endAngle = 270 to have a progress view in the non-complete fraction of a circle.
After updating to 1.4.2, my circles are now complete instead of a 62.5% fraction of a circle.
The startAngle seems to still be functioning, but whatever the value of my endAngle, The circle remains complete.

READ BEFORE POSTING AN ISSUE

Not following these guidelines may result in me ignoring or closing your issue, please carefully read and submit an appropriate issue as it helps with time and fixes.

Please provide the current version of the library you are using

• Version = 1.4.2

Have you read the documentation?

• Yes

Is it a bug? Provide the following

• Detailed overview of what you are trying to accomplish

Hello, i have implemented UICircularProgressRing in my project. actually im getting percentage value from webservice and i'm setting it to theUICircularProgressRing and it is working fine with animation with proper color for both inner and outer ring. But after loading and setting the percentage successfully i need to change the theme color for my views and also for UICircularProgressRing. but the color is not setting for the UICircularProgressRing.innerRingColor
but when my viewdidLoad method is called then the new color is setting for the inner ring properly.

Please Help.
ThankYou.

As I read the document,I set the value of viewStyle equal 2, but the radius of inner ring is smaller than outer ring, rather than equal to its.here is the result and code:

       ring1.animationStyle = kCAMediaTimingFunctionLinear
        ring1.fontSize = 20
        ring1.fontColor = UIColor.yellow
        ring1.maxValue = 10
        ring1.viewStyle = 2
        ring1.innerRingColor = UIColor.yellow
        ring1.setProgress(value: 9, animationDuration: 5, completion: nil)

here is I want it to be that:

Should I set the inner circle width to equal the outer circle width?? I tried that ring1.innerRingWidth = ring1.outerRingWidth, it can not achievement my thinking, Hope you can help me, thanks!

I need fractional value in progress label. It is showing only whole number. How to show value like this:
0.1% 0.2% ... 99.9% of a progress value in a label.

I need this because I am showing circular progress ring for large file download. In poor networks, it takes more time to progress from 1% to 2%. If I can show fractions, it looks effective.

Thanks!

I want to show complete with pattern dashes with two colours like percentage of data is one colour (suppose 60%) and rest of 40% is with different colour, i have to show like this, any suggestions? And I don't want line.

Hello Luis,

I am developing a speedtest app and using the framework for showing countdown for a download period. By default it is planned to be animating 10 seconds like:
self.uploadCircle.setProgress(value: 100, animationDuration: 10.0)
but sometimes download finishes earlier than 10 seconds. In those cases i want to stop the 10 second animation and immediately make it %100 percent. I tried several ways like:

func downloadTimerInvalidator () {

    if let downReq = self.downloadRequest{
        downReq.cancel()
    }
    DispatchQueue.main.async {
        self.downloadCircle.setProgress(value: 100, animationDuration: 0.1)
    }
}

but it didn't work. It is like ignoring this line and having the full 10 sec cycle. Any help is appreciated. Thanks.

I can not use interface builder with Xcode 9

Most of the percentage circular rings I have seen start from vertical top, but this one doesn't. See the following pictures, for example. What is your say about it?

i run pod install but :
Unable to find a specification for UICircularProgressRing
thank you!

Hi,

Can you guide me how to add class and module at UIView programmatically , I search for alot on internet but none solution work for me .

I tried to type in "UICircularProgressRingView" , but xcode doesn't recognize. I new with swift sorry

How would you handle re-animating the progress ring upon returning to the view controller?

Imagine a scenario where I start a download on a view controller it starts animating the progress ring and I leave said view controller and return later to see the progress ring update based on progress info.

Right now I am tracking the download progress globally and upon revisiting the view controller the progress ring updates but stops while the progress info keeps updating. Any thoughts?

Thanks!

Hello! Thank you for this amazing library. I have set this in the IB: "Montserrat-Semibold".
The font is surely imported correctly into the app, because IB shows this:

But, it breaks when the table view cell displays it. I get this:

I don't modify the cell at all, nor I don't change anything except the progress by calling setProgress.

Any ideas why it break? I also tried to set it programatically, exactly same result.

Can you enhancement so we can pass a custom font... not just the string name

READ BEFORE POSTING AN ISSUE

Not following these guidelines may result in me ignoring or closing your issue, please carefully read and submit an appropriate issue as it helps with time and fixes.

Please provide the current version of the library you are using

• Version =

Have you read the documentation?

• Yes

• No

  If no, read the docs here before posting an issue

Is it a bug? Provide the following

• Detailed overview of what you are trying to accomplish
• What is the expected outcome?
• What is the actualy outcome?
• Either post sample code, or example project where isssue can be recreated

Is it a question? Provide the following

• Has it be answered here before?
• Be detailed and describe the question in detail
• If it's a question about something that is happening within your code base, either post a small amount of code, email me project if you want to keep it private, or post an example project where I can try to assist
• Please do your own research before posting any questions which may have been asked on StackOverFlow before.
• Make sure to communicate back and keep issue updated or it will be closed

Is it a feature request? Provide the following

• Does it make sense to put this in the project? Why
• Is it something that can be done in a reasonable amount of time?
• Will it effect anyone currently using the lib?
• Have you tried to implement this and submit a pull request, if no, why not?

If you have read all of this please follow the template and post the issue. Thanks for using UICiruclarProgressRing.

READ BEFORE POSTING AN ISSUE

Not following these guidelines may result in me ignoring or closing your issue, please carefully read and submit an appropriate issue as it helps with time and fixes.

Please provide the current version of the library you are using

• Version =

Have you read the documentation?

• Yes

• No

  If no, read the docs here before posting an issue

Is it a bug? Provide the following

• Detailed overview of what you are trying to accomplish
• What is the expected outcome?
• What is the actualy outcome?
• Either post sample code, or example project where isssue can be recreated

Is it a question? Provide the following

• Has it be answered here before?
• Be detailed and describe the question in detail
• If it's a question about something that is happening within your code base, either post a small amount of code, email me project if you want to keep it private, or post an example project where I can try to assist
• Please do your own research before posting any questions which may have been asked on StackOverFlow before.
• Make sure to communicate back and keep issue updated or it will be closed

Is it a feature request? Provide the following

• Does it make sense to put this in the project? Why
• Is it something that can be done in a reasonable amount of time?
• Will it effect anyone currently using the lib?
• Have you tried to implement this and submit a pull request, if no, why not?

If you have read all of this please follow the template and post the issue. Thanks for using UICiruclarProgressRing.

The debugging area becomes nearly unusable when shouldShowValueText = false because it is constantly printing Not drawing value label because shouldShowValueText = false.

It'd be nice to have the option to silence this in some way, in the meantime I'm having to just display the undesired label during development.

Hello !

There is a slight issue on the patternForDashes, property.
When it is used, you only take into account the first member of the provided array.

In your UICircularProgressRingLayer L173 :
outerPath.setLineDash(patternForDashes, count: 1, phase: 0.0)
and it should (according to me) be :
outerPath.setLineDash(patternForDashes, count: patternForDashes.count, phase: 0.0)

Without fixing this, you can't set a proper dash pattern, only the length of a dash is taken into account.

Hope it helps.

Is there anyway to add padding to the view? I want it a specific size but then to be able to add padding to all sides so it "shrinks"

Hello,

Thanks for making this project! I'm having some issues with the way the progress ring is rendered. I'm embedding the progress ring into a TableViewCell and when it first loads, it shows up pixelated like this:

Strangely, after clicking it, it then renders nice and smoothly:

This is some minimal test code for initializing the TableViewCell, using Cartography for autolayout constraints .

 override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)

        let progressRing = UICircularProgressRingView(frame: CGRect(x: 0, y: 0, width: 50, height: 50))

        progressRing.setProgress(value: 39, animationDuration: 2.0) {
            print("Done animating!")
        }

        self.contentView.addSubview(progressRing)

        constrain(progressRing) {p in
            p.center == p.superview!.center
        }
    }

I'm not sure that it has anything specifically to do with your library since I can't seem to reproduce it from your sample app, but do you have any idea what could be causing this?

There are a bunch of stackoverflow issues that say it might have something to do with CALayer and the contentsScale property, but I don't have enough experience with CALayer to know whether that's the case.

First: Great Framework, especially the customizability!

I haven't font the ability to add a color gradient for the rings. Before I adopt your framework I would like to ask if you already have designed this.

Thanks

How can set start value in progress bar

Can i make the progress view like this? and the label is stick beside the value knob?