harrycheung / kaprogresslabel

Minimal circular progress label

KAProgressLabel

Minimal circular progress label for iOS.

Demo 1

Demo 2

Endless possibilities!

Installing

Lame install

• Copy the KAProgressLabel/KAProgressLabel folder into your project.
• Import KAProgressLabel.h from your .pch file

Using CocoaPods

Add this line to your Podfile:

pod 'KAProgressLabel'

Usage

Style

Colors

self.myProgressLabel.fillColor = [UIColor blackColor];
self.myProgressLabel.trackColor = [UIColor redColor];
self.myProgressLabel.progressColor = [UIColor greenColor];

Widths

self.myProgressLabel.trackWidth = 2.0;         // Defaults to 5.0
self.myProgressLabel.progressWidth = 4;        // Defaults to 5.0
self.myProgressLabel.roundedCornersWidth = 10; // Defaults to 0

Start and end labels

A (very) small text can be display at the start and end of the progress arc, via 2 dedicated labels. You can style this label any way you want.

self.myProgressLabel.startLabel.text = @"S";
self.myProgressLabel.endLabel.text = @"E";

Progress

Set progress

Helper function to use this component easily when it comes to progress.

// Progress must be between 0 and 1
self.myProgressLabel.progress = 0.5;

Set progress (animated)

A block is provided in order for you to change the content of the label according to your needs.

- (void)viewDidLoad {
    self.myProgressLabel.labelVCBlock = ^(KAProgressLabel *label) {
        label.text = [NSString stringWithFormat:@"%.0f%%", (label.progress * 100)];
    };

    [self.myProgressLabel setProgress:0.5
                               timing:TPPropertyAnimationTimingEaseOut
                             duration:1.0
                                delay:0.0];
}

User interaction

You can allow the user to interact with both startDegree and endDegree. By default, user interaction is disabled.

// Activate user interaction on both sides
self.myProgressLabel.isStartDegreeUserInteractive = YES;
self.myProgressLabel.isEndDegreeUserInteractive = YES;

Advanced usage

If you need fine-tune yourself the arc to display.

- (void)setStartDegree:(CGFloat)startDegree;
- (void)setEndDegree:(CGFloat)endDegree;