A circular, animatable & highly customizable progress bar from the Interface Builder (Objective-C)

Overview

Version License Platform Carthage compatible Analytics

If you use MBCircularProgressBar, please tell me and I will add your app here.

Usage

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

Installation

Cocoapods

MBCircularProgressBar is available through CocoaPods.

To install it, simply add the following lines to your Podfile:

  • Add this line to the begining of your Podfile in order to support @IBDesignable. More info here (Thanks to: @StevenMasini)
use_frameworks!
  • Add this line so with every Pod install/update cocoapods would download the library intro your project:
pod "MBCircularProgressBar"

Installation with Carthage

Carthage is a decentralized dependency manager that builds your dependencies and provides you with binary frameworks.

You can install Carthage with Homebrew using the following command:

$ brew update
$ brew install carthage

To integrate MBCircularProgressBar into your Xcode project using Carthage, specify it in your Cartfile:

github "MatiBot/MBCircularProgressBar"

Run carthage update to build the framework and drag the built MBCircularProgressBar.framework into your Xcode project.

Directly

You can also download the MBCircularProgressBar{View,Layer}.{m,h} files into your project directly

Properties

Property name Property type Description Range
value CGFloat The value to be displayed in the center [0,maxValue]
maxValue CGFloat The maximum possible value, used to calculate the progress (value/maxValue) [0,∞)
showValueString BOOL Should show value string
showUnitString BOOL Should show unit string
valueFontName NSString The name of the font of the value string Any valid font name
valueFontSize CGFloat The font size of the value text [0,∞)
valueFontName NSString The name of the font of the unit string Any valid font name
unitFontSize CGFloat The font size of the unit text [0,∞)
unitString NSString The string that represents the units, usually %
fontColor UIColor The color of the value and unit text
decimalPlaces NSInteger Number of decimal places of the value [0,∞)
progressRotationAngle CGFloat Progress bar rotation (Clockewise) [0,100]
progressAngle CGFloat Set a partial angle for the progress bar [0,100]
progressLineWidth CGFloat The width of the progress bar (user space units) [0,∞)
progressColor UIColor The color of the progress bar
progressStrokeColor UIColor The color of the progress bar frame
progressCapType NSInteger The shape of the progress bar cap {kCGLineCapButt=0, kCGLineCapRound=1, kCGLineCapSquare=2}
emptyLineWidth CGFloat The width of the background bar (user space units) [0,∞)
emptyLineColor UIColor The color of the background bar
emptyCapType CGFloat The shape of the background bar cap {kCGLineCapButt=0, kCGLineCapRound=1, kCGLineCapSquare=2}
textOffset CGPoint The offset to apply to the unit / value text (0,0) = center of the circle

Animation

In order to animate a change in the progress bar you should nest the value property manipulation in a [UIView animateWithDuration:] method

    [UIView animateWithDuration:1.f animations:^{
        self.progressBar.value = 55.f;
    }];

References

[iOS][Swift] MBCircularProgressBar で円形のプログレスバーを実現 by @cocominap (in Japanese)

Author

Mati Bot, [email protected], @b0tnik

Apps that use it:

20 Hours

License

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

Comments
  • Animation inside UITableView

    Animation inside UITableView

    Seems animation doesn't work if I place the instance of progress bar in custom cell and call setValue with animationWithDuration

    Edit: it works when scrolling but not sure how to make it visible in first load. Anyhow, I think this can be closed as it is not this code issue. Thank you!

    opened by iSpartak 7
  • IB Designables Warnings

    IB Designables Warnings

    Hi Mati,

    First I would like to tell you that your framework is really awesome!

    But I'm meeting some warning every time I update a value in Interface Builder. All the properties are rising an exception of this kind.

    warning: IB Designables: Ignoring user defined runtime attribute for key path "maxValue" on instance of "UIView". Hit an exception when attempting to set its value: [<UIView 0x7fc911624cd0> setValue:forUndefinedKey:]: this class is not key value coding-compliant for the key maxValue.

    Is there is a way we can disable IBDesignable, or do you have a solution to fix this issue ?

    Steven.

    opened by StevenMasini 5
  • Add support for completion block that fires after animation ends

    Add support for completion block that fires after animation ends

    I needed the ability to chain animation sequences similar to UIView's animateWithDuration:completion method. I added setValue:animateWithDuration:completion to enable animation chaining.

    Implements https://github.com/MatiBot/MBCircularProgressBar/issues/12

    opened by swaffoja 4
  • Crash on Xcode 6.4

    Crash on Xcode 6.4

    Hi, I'm using your lib to make a progress bar for my app, and unfortunately, my Xcode has been crashed when trying to switch to another tab or other files.

    screen shot 2015-08-18 at 11 34 19 am Crash appears when click on another tab

    opened by khanhVVd8 4
  • animation of circular progress bar fails if it goes to background and comes back to foreground

    animation of circular progress bar fails if it goes to background and comes back to foreground

    Let's say my animation time is 30 seconds and I will have progress bar reached to 55 when 30 seconds are over.but If I push the app to background and bring it to foreground then the progress bar has reached to 55 even though 30 seconds are not over yet.

     [UIView animateWithDuration:5.f animations:^{
            self.progressBar.value = 55.f;
        }];
    
    opened by Duraiamuthan 3
  • Problem with animation

    Problem with animation

    Hi. Somebady know how can I fix it? I can see my animation. That's my code:

    import UIKit import MBCircularProgressBar

    class FirstViewController: UIViewController {

    @IBOutlet weak var progressView: MBCircularProgressBarView!
    
    @IBOutlet weak var userImage: UIImageView!
    
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        
        self.userImage.layer.cornerRadius = self.userImage.frame.size.height / 2
        self.userImage.clipsToBounds = true
        
    
        
        self.progressView.value = 0
        self.progressView.maxValue = 70
    
    
    }
    
    override func viewWillAppear(_ animated: Bool) {
        
        UIView.animate(withDuration: 1.0){
            self.progressView.value = 52
        }
    
        }
    

    }

    opened by paereson 1
  • Error: IB Designables No Suitable Image Found

    Error: IB Designables No Suitable Image Found

    I installed MBCircularProgressBar using Carthage. I'm facing the error below when using MBCircularProgressBar in Interface Builder.

    error: IB Designables: Failed to render and update auto layout status for ViewController (BYZ-38-t0r): dlopen(MBCircularProgressBar.framework, 1): no suitable image found.  Did find:
    MBCircularProgressBar.framework: required code signature missing for 'MBCircularProgressBar.framework'
    

    I tried removing ~/Library/Developer/Xcode/DerivedData/ then cleaning and rebuilding project. However, the issue persists.

    Using Xcode 9.3.1 and Swift 4

    opened by yogur 1
  • Compilation error when integrating via Carthage using option --no-use-binaries

    Compilation error when integrating via Carthage using option --no-use-binaries

    When integrating the lib using Carthage and building dependencies from sources (using flag --no-use-binaries) the compilation fails due to invalid bundle with assets.

    The root cause of this issue is that shared scheme with dynamic framework (that Carthage is using) is in fact a auto-generated Cocoapod scheme. So without running pod install the compilation will always fail.

    To fix this we should create a standalone dynamic framework scheme, as opposed to re-using autogenerated scheme from Cocoapods.

    opened by azubala 1
  • Indeterminate Animation

    Indeterminate Animation

    Is there a way to make the progress indicator spin around if you can not determine a value for the progress? For example, downloading a file that you don’t know the length of.

    opened by Hackmodford 1
  • Carthage update fail

    Carthage update fail

    *** Building scheme "MBCircularProgressBar" in MBCircularProgressBar.xcworkspace
    Build Failed
    	Task failed with exit code 65:
    	/usr/bin/xcrun xcodebuild -workspace /Users/rJaspur/Code/Swift/Test/MijnBewijsstukken/MijnBewijsstukken/Carthage/Checkouts/MBCircularProgressBar/Example/MBCircularProgressBar.xcworkspace -scheme MBCircularProgressBar -configuration Release -derivedDataPath /Users/rJaspur/Library/Caches/org.carthage.CarthageKit/DerivedData/MBCircularProgressBar/0.3.4 -sdk iphonesimulator -destination platform=iOS\ Simulator,id=71393AA9-848E-42BB-A478-ECEBAC1296F4 -destination-timeout 3 ONLY_ACTIVE_ARCH=NO CODE_SIGNING_REQUIRED=NO CODE_SIGN_IDENTITY= CARTHAGE=YES clean build
    
    This usually indicates that project itself failed to compile. Please check the xcodebuild log for more details: /var/folders/kq/92sqq9ps5j78dxyf062tzchm0000gn/T/carthage-xcodebuild.EsGQem.log
    
    opened by Jaspur 1
  • Are you planning to add multiple progresses?

    Are you planning to add multiple progresses?

    Like 100% max value, 20% progress 1, 10% progress 2, 50% progress 3, 20% progress 4.

    So four colors in one circle.

    It would be really cool to have that feature.

    opened by Marlunes 1
  • Animation works only once in tableview cell

    Animation works only once in tableview cell

    Below is my code.

    I have taken button in tableview cell and below is the action part.

    cell.clickOnMyStreakAction = { cell.streakProgressbar.layer.needsDisplay() cell.streakProgressbar.value = 100.0 cell.streakProgressbar.showValueString = false }

    Note: This animation works only once. If User will tap another tab or any other view and come back it's stop working.

    opened by akashragahnihb 0
  • Xcode 12.5.1 Interface Builder  issue

    Xcode 12.5.1 Interface Builder issue

    Hi In Xcode 12.5.1 I am getting the following error;

    file:///..../.../Main.storyboard: error: IB Designables: Failed to render and update auto layout status for ViewController (Gqt-dS-ntA): The bundle “MBCircularProgressBar.framework” couldn’t be loaded because its executable couldn’t be located.

    This was an existing project that worked before, if I compile it, everything is fine, and works but in the IB I now get this error and I am not able to see it anymore on my storyboard

    opened by martin072 0
  • I need to start the progress from a choosen angel that i choose to the destination that i choose

    I need to start the progress from a choosen angel that i choose to the destination that i choose

    Is this applicable using your code or it needs modification please help,

    In other words lets say i want the progress bar to start at angel 330 ( 11 clock ) and ends at angel 120 ( 4 clock )

    opened by MahmoudZinji 0
Owner
Mati Bot
I love to create products that people love and use everyday
Mati Bot
Flexible Stepped Progress Bar for IOS

FlexibleSteppedProgressBar This is a stepped progress bar for IOS. The base code is derived from ABSteppedProgressBar. Most of the design is customisa

Amrata Baghel 549 Jan 6, 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
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
Material Linear Progress Bar for your iOS apps

LinearProgressBar Material Linear Progress Bar for your iOS apps Installation Carthage: github "Recouse/LinearProgressBar" CocoaPods: Add this to you

Firdavs Khaydarov 161 Dec 5, 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
⌛️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
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
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
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
PBCircularProgressView is a circular progress view for iOS similar to the app store download progress view.

Overview PBCircularProgressView is a circular progress view for iOS similar to the app store download progress view. It also ha

null 0 Oct 27, 2021
Snake Progress shows circular progress for iOS Apps.

SnakeProgress SnakeProgress shows circular progress for iOS Apps. With SnakeProgress With SnakeProgress, you can easily circular progress. @IBOutlet w

null 8 Sep 22, 2022
VerticalSlider - An animatable and customizable vertical slider written in Swift 4

VerticalSlider An animatable and customizable vertical slider written in Swift 4. Quick Start VerticalSliderPlayground Clone Repo Open VSVerticalSlide

Vincent Smithers 13 Apr 26, 2022
UIView based progress bar that shows a progress based on duration in seconds

DurationProgressBar Create a progress bar based on a duration in seconds. The view is fully customisable. Install Add this repository to your swift pa

Cem Olcay 2 May 21, 2022
APDynamicGrid is a SwiftUI package that helps you create consistent and animatable grids.

APDynamicGrid Overview APDynamicGrid is a SwiftUI package that helps you create consistent and animatable grids. The DynamicGrid View preserves the sa

Antonio Pantaleo 29 Jul 4, 2022
iOS camera engine with Vine-like tap to record, animatable filters, slow motion, segments editing

SCRecorder A Vine/Instagram like audio/video recorder and filter framework in Objective-C. In short, here is a short list of the cool things you can d

Simon Corsin 3.1k Dec 25, 2022
📱 TabBar – highly customizable tab bar for your SwiftUI application.

TabBar SwiftUI standard TabView component is not so flexible and to customize it you have to modify appearance proxy of UITabBar or implement your own

Tamerlan Satualdypov 162 Jan 5, 2023
📊 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