iOS Circle Progress Bar

Overview

CircleProgressBar

Circle Progress Bar iOS Control.

Require iOS 7.0+ or tvOS 9.0+

CircleProgressBar Screenshot-iOS-Example CircleProgressBar Screenshot-iOS-Example2

Installation

You can install this control in two ways:

  1. Using CocoaPods:
pod 'CircleProgressBar', '~> 0.32
  1. Manually:

Download source from this repository and copy CircleProgressBarDemo/CircleProgressBar folder to your project.

Don't forget to add UIKit and QuartzCore frameworks to your project.

How to use

NOTE: If you installed this control manually - please be sure that you've added UIKit and QuartzCore frameworks to your project.

NOTE: If you're using rectangular view for CircleProgressBar control instead of square, ProgressBar will fit available area and will be drawn in center of it.

NOTE: If you're using swift, be sure to add import CircleProgressBar to source file where you're using it.

You can simply add UIView in Interface Builder to your controller and change it's class to "CircleProgressBar" (overridden initWithCoder method will be called) or create CircleProgressBar programmatically using init or initWithFrame methods.

Using Interface Builder you'll take advantage of Xcode 6 new live rendering feature to customize control according to your needs on the fly (will be explained below in "Customization" section).

To change progress, simply call "setProgress:animated:" method of CircleProgressBar instance:

Objective-c:

[_circleProgressBar setProgress:(CGFloat)progress animated:(BOOL)animated];

Swift:

circleProgressBar.setProgress(CGFloat, animated: Bool)

or "setProgress:animated:duration:" method to define custom animation time:

Objective-c:

[_circleProgressBar setProgress:(CGFloat)progress animated:(BOOL)animated duration:(CGFloat)duration];

Swift:

circleProgressBar.setProgress(CGFloat, animated: Bool, duration: CGFloat)

To check if there is ongoing animation use isAnimating property. To stop an ongoing animation, you can use stopAnimation method. In this case it will set the progress to animation end value:

Objective-c:

[_circleProgressBar stopAnimation];

Swift:

circleProgressBar.stopAnimation()

Customization

CircleProgressBar provides many customization properties:

// Progress Bar Customization
@property (nonatomic) CGFloat progressBarWidth;
@property (nonatomic) UIColor *progressBarProgressColor;
@property (nonatomic) UIColor *progressBarTrackColor;
@property (nonatomic) CGFloat startAngle;

// Hint View Customization (inside progress bar)
@property (nonatomic) BOOL hintHidden;
@property (nonatomic) CGFloat hintViewSpacing;
@property (nonatomic) UIColor *hintViewBackgroundColor;
@property (nonatomic) UIFont *hintTextFont;
@property (nonatomic) UIColor *hintTextColor;

Using these customization properties you can define Progress Bar's width, color of filled part, color of empty part, Progress Bar's start angle, Hint View's spacing (between progress bar and hint view), background color, hint text color and hint text font.

If you want to hide HintView you can simply set hintHidden property to NO.

To customize text inside HintView you can simply set TextGenerationBlock:

Objective-c:

[_circleProgressBar setHintTextGenerationBlock:(StringGenerationBlock)generationBlock];

Swift:

circleProgressBar.setHintTextGenerationBlock(generationBlock: StringGenerationBlock!)

For example this way:

Objective-c:

[_circleProgressBar setHintTextGenerationBlock:^NSString *(CGFloat progress) {
  return [NSString stringWithFormat:@"%.0f / 255", progress * 255];
}];

Swift:

circleProgressBar.setHintTextGenerationBlock { (progress) -> String? in
    return String.init(format: "%.0f / 255", arguments: [progress * 255])
}

If you want to use NSAttributedString you can set instead HintAttributedGenerationBlock:

Objective-c:

[_circleProgressBar setHintAttributedGenerationBlock:(AttributedStringGenerationBlock)generationBlock];

Swift:

circleProgressBar.setHintAttributedGenerationBlock(generationBlock: AttributedStringGenerationBlock!)

If you using Interface Builder, you can take an advantage of Xcode 6 live render with IBDesignable and IBInspectable features to customize control:

CircleProgressBar Screenshot-Xcode-InterfaceBuilder

License (MIT)

Copyright (c) 2015-2018 Andrew Cherkashyn

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Comments
  • Add setHintAttributedStringGenerationBlock method

    Add setHintAttributedStringGenerationBlock method

    Hi,

    Very nice component. I'm wondering if it could be possible to add a setHintAttributedStringGenerationBlock to have attributed string for the hint instead of just plain text.

    Regards,

    opened by loicgriffie 8
  • Progress Duration is Wrong

    Progress Duration is Wrong

    Try doing setProgress: 1 duration:30.0f, the bar will only get to about 90% in the demo app (also experiences the same in my app). Is there a fix for this?

    opened by bchessin 6
  • Duration

    Duration

    Hi,

    Thanks for writing this awesome library. I had a question about the docs - you mention this method:

    [_circleProgressBar setProgress:(CGFloat)progress animated:(BOOL)animated duration:(CGFloat)duration];
    

    But it appears its not in the library. Turns out it is exactly what I need, any chance you have it or have plans to implement?

    Thanks!

    opened by pocketwod 6
  • CircleProgressBar doesn't update progress value when animated change method is called very often

    CircleProgressBar doesn't update progress value when animated change method is called very often

    Anyone know why it doesn't working in block? I tried to show this CircleProgressBar when user tapped on download button. here is my code :

    • (IBAction)DownloadButtonTapped:(id)sender {

      [VideoDownloaderHelper downloadVideoFromURL:@"https://fbcdn-video-n-a.akamaihd.net/hvideo-ak-xap1/v/t43.1792-2/12326419_567683906728653_1549711566_n.mp4?efg=eyJybHIiOjE1MDAsInJsYSI6MTc5OSwidmVuY29kZV90YWciOiJzdmVfaGQifQ%3D%3D&rl=1500&vabr=861&oh=39b5e0b02bb7873b2f1f7e3ec6e90d67&oe=566AD689&gda=1449842290_0e0e2f200458c7a7aff7f1e7acaea79e" withProgress:^(CGFloat progress) { NSLog(@"total progress : %f", progress);

      // [_circleProgressBar setProgress:progress animated:YES];

      [_circleProgressBar setProgress:(_circleProgressBar.progress + progress) animated:YES];
      

      } completion:^(NSURL *filePath) { NSLog(@"filePath :%@", filePath); } onError:^(NSError *error) { NSLog(@"error download video: %@", error); }];

    }

    opened by afiq90 5
  • add support for change startAngle

    add support for change startAngle

    This library works really cool and saved my time,thanks for you work :). I am using it in my project. But I found the start angle can't be changed. so I made the change to the start angle. Please review the code. Hopefully it could be helpful.

    opened by hildert 4
  • Transparent hintViewBackgroundColor

    Transparent hintViewBackgroundColor

    If I set transparent (default) background color to hintViewBackgroundColor transparent bacground color I got black background. How can I set transparent BackgroundColor to circle progress bar?

    opened by ugochirico 3
  • Set line cap

    Set line cap

    Hey this library is great

    I was trying to customize drawProgressBar: with CGContextSetLineCap(context, kCGLineCapRound); but there was no change.. any thoughts?

    opened by dkhamsing 3
  • Background is black no matter what

    Background is black no matter what

    Hi, awesome control, thanks for sharing. I am having an issue that I can't figure out looking at the source code. The View in IB has a white background color, but for some reason, the control is drawn with a black background no mater what I do. Even if I set the background color of the view in code to something else, it still shoes black. Do you have any clues for me? I"m happy to keep investigating, but if you have some ideas I'd be happy to hear them. Thank you!

    _circleProgressBar.progressBarWidth = 15;
    _circleProgressBar.startAngle = 270.0;
    _circleProgressBar.hintViewBackgroundColor = [UIColor whiteColor];
    _circleProgressBar.backgroundColor = [UIColor whiteColor];
    _circleProgressBar.progressBarTrackColor = [UIColor appHeaderBackgroundNormalColor];
    _circleProgressBar.progressBarProgressColor = [UIColor appNormalColor];
    _circleProgressBar.hintTextColor = [UIColor appNormalColor];
    _circleProgressBar.hintTextFont = [UIFont fontForAppWithType:Book andSize:15];
    _circleProgressBar.hintHidden = NO;
    

    screenshot 2015-04-29 23 41 54

    opened by npahucki 3
  • Error with hint text generation block example

    Error with hint text generation block example

    circleProgressBar.setHintTextGenerationBlock { (progress) -> String? in
        return String.init(format: "%.0f / 255", arguments: [progress * 255])
    }
    

    Causes the following error: Cannot convert value of type '([CVarArg]) -> String?' to expected argument type 'StringGenerationBlock'!

    opened by UIApplicationMain 2
  • How to create two lines Inside the circle Progress Bar?

    How to create two lines Inside the circle Progress Bar?

    Hi, How to create two lines inside circle progress Bar. For Example first line contain one string and other lines contain other string. Is it possible?

    opened by miskeen110 1
  • IB_DESIGNABLE for CircleProgressBar Not Working

    IB_DESIGNABLE for CircleProgressBar Not Working

    The IB_DESIGNABLE for CircleProgressBar not working. I am using XCode 7 and Swift 2.0. I did get it to work when adding IBInspectable to each property. See below:

    `/// @brief Width of Progress Bar @property (nonatomic) IBInspectable CGFloat progressBarWidth; /// @brief Progress color in Progress Bar @property (nonatomic) IBInspectable UIColor *progressBarProgressColor; /// @brief Track color in Progress Bar @property (nonatomic) IBInspectable UIColor *progressBarTrackColor; /// @brief Start Angle @property (nonatomic) IBInspectable CGFloat startAngle;

    /// @brief Whether HintView should be shown or not @property (nonatomic) IBInspectable BOOL hintHidden; /// @brief Inner spacing between Progress Bar and Hint View @property (nonatomic) IBInspectable CGFloat hintViewSpacing; /// @brief Hint View Background Color @property (nonatomic) IBInspectable UIColor *hintViewBackgroundColor; /// @brief Hint View Text Font @property (nonatomic) IBInspectable UIFont *hintTextFont; /// @brief Hint View Text Color @property (nonatomic) IBInspectable UIColor *hintTextColor;`

    opened by talezion 1
Owner
Andrew Cherkashyn
Passionate iOS Developer
Andrew Cherkashyn
UIProgressView replacement with an highly and fully customizable animated progress bar in pure Core Graphics

The YLProgressBar is an UIProgressView replacement with a highly and fully customizable animated progress bar in pure Core Graphics. It has been imple

Yannick Loriot 1.3k Jan 5, 2023
A simple animated progress bar in Swift

DSGradientProgressView Introduction DSGradientProgressView is a simple and customizable animated progress bar written in Swift. Inspired by GradientPr

Dhol Studio 445 Oct 13, 2022
📊 A customizable gradient progress bar (UIProgressView).

GradientProgressBar A customizable gradient progress bar (UIProgressView). Inspired by iOS 7 Progress Bar from Codepen. Example To run the example pro

Felix M. 490 Dec 16, 2022
Simple and powerful animated progress bar with dots

Example To run the example project, clone the repo, and run pod install from the Example directory first. Requirements iOS 8.0+ Swift 3.0+ Installatio

Nikola Corlija 42 Dec 5, 2022
💈 Retro looking progress bar straight from the 90s

Description Do you miss the 90s? We know you do. Dial-up internet, flickering screens, brightly colored websites and, of course, this annoyingly slow

HyperRedink 18 Nov 24, 2022
Completely customizable progress based loaders drawn using custom CGPaths written in Swift

FillableLoaders Completely customizable progress based loaders drawn using custom CGPaths written in Swift Waves Plain Spike Rounded Demo: Changelog:

Pol Quintana 2.1k Dec 31, 2022
Step-by-step progress view with labels and shapes. A good replacement for UIActivityIndicatorView and UIProgressView.

StepProgressView Step-by-step progress view with labels and shapes. A good replacement for UIActivityIndicatorView and UIProgressView. Usage let progr

Yonat Sharon 340 Dec 16, 2022
Simple Swift Progress HUD

MKProgress An iOS Simple Swift Progress HUD Requirements iOS 9.0+ Swift 3.0+ Xcode 8.0+ Installation MKProgress is only available via CocoaPods: pod '

Muhammad Kamran 143 Dec 23, 2022
A clean and lightweight progress HUD based on SVProgressHUD, converted to Swift with the help of Swiftify.

IHProgressHUD IHProgressHUD is a clean and easy-to-use HUD meant to display the progress of an ongoing task on iOS and tvOS. IHProgressHUD is based on

Swiftify 202 Dec 22, 2022
⌛️A customizable animated gradient loading bar.

GradientLoadingBar A customizable animated gradient loading bar. Inspired by iOS 7 Progress Bar from Codepen. Example To run the example project, clon

Felix M. 791 Dec 26, 2022
StatusBarOverlay will automatically show a "No Internet Connection" bar when your app loses connection, and hide it again

StatusBarOverlay will automatically show a "No Internet Connection" bar when your app loses connection, and hide it again. It supports apps which hide the status bar and The Notch

Idle Hands Apps 160 Nov 2, 2022
A beautiful activity indicator and modal alert written in Swift (originally developed for my app DoodleDoodle) Using blur effects, translucency, flat and bold design - all iOS 8 latest and greatest

SwiftSpinner SwiftSpinner is an extra beautiful activity indicator with plain and bold style. It uses dynamic blur and translucency to overlay the cur

Marin Todorov 2.1k Dec 19, 2022
The easiest way to handle a simple full screen activity indicator in iOS. Written in Swift.

LLSpinner An easy way to handle full screen activity indicator. Easy to use Get Started // Show spinner LLSpinner.spin() // Hide spinner LLSpinner.st

Aleph Retamal 36 Dec 9, 2021
A view class for iOS that makes uploading easy and beautiful.

SVUploader A view class for iOS that makes uploading easy and beautiful. Demo SVUploader is fully customizable - check out 2 demos. Installation Just

Kiran 79 Apr 18, 2022
A lightweight and awesome loading Activity Indicator for your iOS app.

BPCircleActivityIndicator BPCircleActivityIndicator is a clean and easy-to-use Activity Indicator meant to display the progress of an ongoing task on

Ben.Park 46 Aug 12, 2022
A simple and awesome loading Activity Indicator(with block moving animation) for your iOS app.

BPBlockActivityIndicator BPBlockActivityIndicator is a clean and easy-to-use Activity Indicator meant to display the progress of an ongoing task on iO

Ben.Park 43 Nov 6, 2021
IOS HUD Swift Library

JHProgressHUD JHProgressHUD is an iOS class written in Swift to display a translucent HUD with an indicator and/or labels while work is being done in

Harikrishnan T 79 Feb 27, 2021
Meet cute and very flexibility library for iOS application for different data view in one circle diagram.

SMDiagramViewSwift Meet cute and very flexibility library for iOS application for different data view in one circle diagram. The opportunity of transf

VRG Soft 42 Sep 17, 2022
UICollectionViewCell with checkbox when it isSelected and empty circle when not - like Photos.app "Select" mode.

CheckmarkCollectionViewCell UICollectionViewCell with checkbox when it isSelected and empty circle when not - like Photos.app "Select" mode. Usage cla

Yonat Sharon 62 Oct 19, 2022
A simple circle style menu.

Support CocoaPods. New at 2019.02.25 Use @property (nonatomic, assign) BOOL isOpened; can open or close RoundMenu. use -(void)setButtonEnable:(BOOL)en

zsy78191 383 Dec 21, 2022