Latest 1.0.0
License MIT
Platforms ios 8.0

CI Status

On HUD =>


  • Circular Progress Chart with animation.
  • Bar thickness can be customized.
  • Animation duration can be customized.
  • Also can be used as a Pie Chart by increasing the bar thickness.


To run the example project, clone the repo, and run pod install from the Example directory first.



  • iOS 8.0+
  • Xcode 8.0+


KATCircularProgressChart is available through CocoaPods.


CocoaPods is a dependency manager for Cocoa projects. You can install it with the following command:

$ gem install cocoapods

After the CocoaPod installation , To install KATCircularProgressChart simply add the following line to your Podfile:

pod 'KATCircularProgressChart'


pod 'KATCircularProgressChart', '1.0.0'

Then, run the following command:

$ pod install


If you prefer not to use either of the aforementioned dependency managers, you can integrate KATCircularProgressChart into your project manually.
Just need to add "KATCircularProgress.h" and "KATCircularProgress.h" files to your project.


First import "KATCircularProgress.h" file to your ViewController.

#import "KATCircularProgress.h"

Then create a UIView from the storyboard which contains the same width and height. Then make an outlet to your ViewController.

#import "ViewController.h"
#import "KATCircularProgress.h"

@interface ViewController () {


@property (strong, nonatomic) IBOutlet KATCircularProgress *ProgressChart;


Each entry you need to add as a SliceItem object which contains itemValue (float) and ItemColor (UIColor).Create few slice items
like this.

SliceItem *item1 = [[SliceItem alloc] init];
item1.itemValue = 50.0; // value should be a float value
item1.itemColor = [UIColor blueColor]; // color should be a UIColor value

SliceItem *item2 = [[SliceItem alloc] init];
item2.itemValue = 100.0;
item2.itemColor = [UIColor greenColor];

SliceItem *item3 = [[SliceItem alloc] init];
item3.itemValue = 150.0;
item3.itemColor = [UIColor yellowColor];

Then add these objects to sliceItems array which is property of your KATCircularProgress.

[self.ProgressChart.sliceItems addObject:item1];
[self.ProgressChart.sliceItems addObject:item2];
[self.ProgressChart.sliceItems addObject:item3];

When you are using this chart again and again (Like in a list view) Please make sure clear the array before adding the new items.

[self.ProgressChart.sliceItems removeAllObjects];

Finaly reload the progress chart.

[self.ProgressChart reloadData];

Here is the full code snippet.

#import "ViewController.h"
#import "KATCircularProgress.h"

@interface ViewController ()

@property (strong, nonatomic) IBOutlet KATCircularProgress *progressChart;


@implementation ViewController

- (void)viewDidLoad {
[super viewDidLoad];

SliceItem *item1 = [SliceItem new];
item1.itemValue = 25.0;
item1.itemColor = [UIColor greenColor];

SliceItem *item2 = [SliceItem new];
item2.itemValue = 35.0;
item2.itemColor = [UIColor yellowColor];

SliceItem *item3 = [SliceItem new];
item3.itemValue = 125.0;
item3.itemColor = [UIColor orangeColor];

SliceItem *item4 = [SliceItem new];
item4.itemValue = 75.0;
item4.itemColor = [UIColor blueColor];

[self.ProgressChart.sliceItems removeAllObjects];

[self.progressChart.sliceItems addObject:item1];
[self.progressChart.sliceItems addObject:item2];
[self.progressChart.sliceItems addObject:item3];
[self.progressChart.sliceItems addObject:item4];

[self.progressChart reloadData];



For more information please refer the example project. It contains more details about
how to use this pod with UITableView for the list populations.


You can change the bar thickness of the chart as you want.

[self.ProgressChart setLineWidth:30.0];

Also you can adjust the animation duration as well.

[self.ProgressChart setAnimationDuration:2.5];


This is really simple chart you can build lot more complex animations upon this. We are guranteed this
comes with high performace without UI lagging or any performace issues.


Tharindu Ketipearachchi, [email protected]



KATCircularProgressChart is available under the MIT license. See the LICENSE file for more info.

Latest podspec

    "name": "KATCircularProgressChart",
    "version": "1.0.0",
    "summary": "A custome subclass on UIView to provide animated circular progress chart.",
    "description": "This CocoaPod provide the ability to animated circular doughnut type progress chart.",
    "homepage": "",
    "license": {
        "type": "MIT",
        "file": "LICENSE"
    "authors": {
        "TharinduKetipe": "[email protected]"
    "source": {
        "git": "",
        "tag": "1.0.0"
    "social_media_url": "",
    "platforms": {
        "ios": "8.0"
    "source_files": "KATCircularProgressChart/Classes/**/*"

Pin It on Pinterest

Share This