Need help with KAProgressLabel?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

kirualex
406 Stars 71 Forks Other 123 Commits 0 Opened issues

Description

Minimal circular progress label

Services available

!
?

Need anything else?

Contributors list

# 63,742
Swift
Objecti...
apng
swift4
64 commits
# 62,041
Shell
Lua
Jupyter...
cldr
4 commits
# 238,024
Objecti...
Swift
3 commits
# 201,779
Objecti...
React
Shell
CSS
3 commits
# 599,620
Objecti...
Ruby
2 commits
# 623,265
Objecti...
Ruby
1 commit
# 122,224
Elixir
explore...
HTML
reactjs
1 commit
# 623,264
Objecti...
Ruby
1 commit
# 10,199
Nuxt.js
bitbuck...
ecmascr...
custom-...
1 commit
# 607,922
Objecti...
Ruby
1 commit

Language CocoaPods Compatible Build Status

KAProgressLabel

Circular progress label for iOS with styling, animations, interaction and more.

Demo 1

KAProgressLabel

Demo 2

Endless possibilities! KAProgressLabel

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:

ruby
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";

Arc

Progress

If you only want to show a progress, it's straightforward.

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

Specific start/end degrees

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

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;

Animations

You can animate

startDegree
,
endDegree
and
progress
.
- (void)setStartDegree:(CGFloat)startDegree
               timing:(TPPropertyAnimationTiming)timing
             duration:(CGFloat)duration
                delay:(CGFloat)delay;

  • (void)setEndDegree:(CGFloat)endDegree

           timing:(TPPropertyAnimationTiming)timing
         duration:(CGFloat)duration
            delay:(CGFloat)delay;
  • (void)setProgress:(CGFloat)progress

          timing:(TPPropertyAnimationTiming)timing
        duration:(CGFloat)duration
           delay:(CGFloat)delay;

It's possible to stop an already started animation.

- (void)stopAnimations;

You can also add some custom logic at the end of an animation using the

labelAnimCompleteBlock
block.
self.myProgressLabel.labelAnimCompleteBlock = ^(KAProgressLabel *label) {
  NSLog(@"Animation complete !");
};

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.