Circular Progress Indicator in Swift

Updated on April 17, 2017 – Swift 3

Circular progress indicators are a nice and compact way to visualize progress information for users of your iOS app. I was extremely grateful to come across Kaan Dedeoglu’s KDCircularProgress project on GitHub. It’s a versatile little UI component written in Swift that provides a great amount of flexibility and customization options. I love it!

As a bonus to this amazing component, recent contributions by Kaan have opened up the ability for us to lay out and set up the circular progress indicator in the Storyboard!

My goal in this article is to help get you up and running with this library in your own Storyboard-based Swift project.

Example project

Kaan’s GitHub repository has an example project, but I’ve also gone ahead and made one as well for showing how to use this indicator in a Storyboard. We’ll be using the example I created as a reference point for the forthcoming walk-through.

Circular Progress Example

Getting started

The most obvious starting place is to head over to the KDCircularProgress repository on GitHub to grab the KDCircularProgress.swift source file and add it to your own Swift project. Kaan has things set up with CocoaPods as well if you care to use that. I found adding the .swift file to my project to be the least intrusive way to add this indicator to my UI components arsenal.

To the Storyboard!

Since Kaan added IBDesignable and IBInspectable support, working with the circular progress indicator in the Storyboard is super easy.

To get started, all you need to do is drag a plain View over to the Storyboard Scene. Set up your constraints to correctly position the view where you need it:

UIView with Constraints

Next, you need to set the View’s class to a custom class, namely, KDCircularProgress:

Set View Class

With that in place, Xcode will process things and allow you to modify the properties of the progress indicator directly in the attributes section of the Utilities pane. Best of all, you’ll see those changes be reflected in the Storyboard scene in real-time as you adjust values!

Customized in Storyboard

viewDidLoad()

While in the Storyboard, I set a few values so that I could actually see certain colors when progress had been made. However, to get things set to their true initial state, there may be some values you want to reset in viewDidLoad(). For example, I set the angle property to 90 degrees so that I could see the color of the progress track in the storyboard. But when I load the app, I want the angle to be 0 degrees (since no progress has been made when the app first loads).

To accomplish this, you’d simply make sure there’s an outlet between your progress view in the Storyboard and the View Controller. Once they’re connected, you can write something as simple as circularProgressView.angle = 0 to start off with no progress.

Increasing progress

We’re dealing with a progress indicator here, so this implies that there’s a beginning, some incremental steps taken toward a completion goal, and of course, the fully completed whatever it was you were doing.

The example I’ve contrived is a simple counter with an upper limit of 5. So as you tap “Increase Progress”, the circular progress view should update to be some fraction of the way around the 360 degree circle based upon how close we are to completing the count to 5.

There’s a function I’ve built to calculate the new angle:

The rest is simply a matter of updating the current count and animating to the new angle:

Resetting the indicator

To reset everything, we’d want to update the state of our current count back to 0.

The change to the circular progress indicator’s visualization of the progress state can be animated by calling the view’s animate(fromAngle:toAngle:duration:completion:) method:

Wrapping up

There are a ton of other customization options that you can play with. I highly recommend this UI component if you’re looking for an easy-to-use, versatile circular progress indicator!

  • Mauricio Abela

    This was extremely help and easy to use! Do you have a way that I could also control the Track Start and Angle the same way the Progress Bar is controlled? I want to partially hide bottom portion of the circular progress bar? I could cover the bottom it with a UIImageView but then I loose the nice rounded corners. Thanks you!

    • Reynaldo Aguilar

      In the KDCircularProgress class, inside the drawInContext function, comment the line:

      CGContextAddArc(ctx, CGFloat(size.width/2.0), CGFloat(size.height/2.0), arcRadius, 0, CGFloat(M_PI * 2), 0)

      At least in my source code it is at line number 357

  • Reynaldo Aguilar

    Yes, you can. Is there some way in which I can send you the modified code?

    • Mauricio Abela

      Email is probably best, mabela@gmail.com. Thank you!

      • Sunil Tiwari

        Hey @mauricioabela:disqus will you please share the swift code here i Have to implement same thing as u mentioned.

        Thanks In advance

        • Mauricio Abela

          Send me your email and I’ll email it to you.

          • Sunil Tiwari

            sunilkumartiwari17@gmail.com Thanks Bro for all yr help !!!

            -Cheers

          • Andrew Porter

            Hi can you please send it to me? andrew_porter510@hotmail.com

          • Rohit Kumar

            Hi can someone please send this to me? rockinrohit.92@gmail.com

          • Herpin Derpinson

            Hi can you please send it to me as well? klas.segeljakt@hotmail.se

          • Mauricio Abela

            See my response above to Carlos Luis.

          • Andrew Porter

            Hi can someone please send this to me? andrew_porter510@hotmail.com

          • Carlos Luis Urbina

            Hi Mauricio, could you also send me the code, I am trying to do exactly the same and getting nowhere. Thanks a lot .. My email: clus90@gmail.com

          • Mauricio Abela

            Please ask the last person who asked me. That way i’m not the sole point person for emailing everyone the code. Each subsequent person can share it with the next user who is looking for the code.

          • Andrew Porter

            Hi can you please send it to me? andrew_porter510@hotmail.com

    • Hi Reynaldo! Would it be possible for you to email me the code you referred to as well? My email address is jacogriesel@outlook.com – thanks in advance!

    • Gerardo Chavarría Vargas

      Hi Reynaldo. Can please send this to me? gerardojchv@gmail.com

  • Artur Skachkov

    Hi! I can not understand why progress is not transferred into the selected area.It passes only the first two animation progress. And another problem: after pressing the pause and re-activated every time the progress animation speed decreases line of progress

  • Sid

    Hi, I’ve added KDCircularProgress file to my project and it shows 13 swift compiler errors. Even the project that I got from source of the example above has same errors. Does this class still works for you?

  • shyam

    When i am trying to add this into my project (IOS9 and xcode7). It’s shows Designables Build Failed. Can anyone help me why this is happening?

  • Kat Jenkins

    I have the circular progress view working, at the top of a tall page. When I scroll down – and the circular progress view goes ‘out of sight’ – and i scroll back to the top, the circular stops and appears complete. Any ideas?

  • Ice Casasola

    I used to have this working. But with the new Xcode 8 beta4. there has been numerous changes in the code? Do you still plan on updating this code?

  • ashok

    How can i set progress for four different values in circular progress bar??
    Thanks in Advance

    • Alessandro La Pergola

      The one you’re showing is not a progress bar but a statistic data 2d pie.
      A completely different thing and a completely different set of needed data to fill my friend 🙂

      • ashok

        oh is it???
        thanx for ur suggestion dude
        will follow u

  • dijayc

    hi, i need this lib for obj-c, how can i realize it?

  • pallavi batwal

    Hi can someone please send this to me? pallavibatwal4@gmail.com