UIProgressView replacement with an highly and fully customizable animated progress bar in pure Core Graphics

Overview

YLProgressBar

Supported Platforms Version

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

YLProgressBar

It has been implemented using the Core Graphics framework without any images. So it can be customized freely and independently on the platform.

UsageInstallationContributionContactLicense

Usage

Here are some examples to show you how the YLProgressBar can be configured:

// Blue flat progress, with no stripes
_progressBar.type               = YLProgressBarTypeFlat;
_progressBar.progressTintColor  = [UIColor blueColor];
_progressBar.hideStripes        = YES;

// Green rounded/gloss progress, with vertical animated stripes in the left direction
_progressBar.type               = YLProgressBarTypeRounded;
_progressBar.progressTintColor  = [UIColor greenColor];
_progressBar.stripesOrientation = YLProgressBarStripesOrientationVertical;
_progressBar.stripesDirection   = YLProgressBarStripesDirectionLeft;

// Rainbow flat progress, with the indicator text displayed over the progress bar
NSArray *rainbowColors = @[[UIColor colorWithRed:33/255.0f green:180/255.0f blue:162/255.0f alpha:1.0f],
                           [UIColor colorWithRed:3/255.0f green:137/255.0f blue:166/255.0f alpha:1.0f],
                           [UIColor colorWithRed:91/255.0f green:63/255.0f blue:150/255.0f alpha:1.0f],
                           [UIColor colorWithRed:87/255.0f green:26/255.0f blue:70/255.0f alpha:1.0f],
                           [UIColor colorWithRed:126/255.0f green:26/255.0f blue:36/255.0f alpha:1.0f],
                           [UIColor colorWithRed:149/255.0f green:37/255.0f blue:36/255.0f alpha:1.0f],
                           [UIColor colorWithRed:228/255.0f green:69/255.0f blue:39/255.0f alpha:1.0f],
                           [UIColor colorWithRed:245/255.0f green:166/255.0f blue:35/255.0f alpha:1.0f],
                           [UIColor colorWithRed:165/255.0f green:202/255.0f blue:60/255.0f alpha:1.0f],
                           [UIColor colorWithRed:202/255.0f green:217/255.0f blue:54/255.0f alpha:1.0f],
                           [UIColor colorWithRed:111/255.0f green:188/255.0f blue:84/255.0f alpha:1.0f]];

_progressBar.type                     = YLProgressBarTypeFlat;
_progressBar.hideStripes              = YES;
_progressBar.indicatorTextDisplayMode = YLProgressBarIndicatorTextDisplayModeProgress;
_progressBar.progressTintColors       = rainbowColors;

// To allow the gradient colors to fit the progress width
_progressBar.progressStretch          = YES;

You can also use the UIAppearence protocol to configure all the progress bars at once:

[[YLProgressBar appearance] setType:YLProgressBarTypeFlat];
[[YLProgressBar appearance] setProgressTintColor:[UIColor blueColor]];

Installation

The recommended approach to use the YLProgressBar in your project is using the CocoaPods package manager, as it provides flexible dependency management and dead simple installation.

CocoaPods

Install CocoaPods if not already available:

$ [sudo] gem install cocoapods
$ pod setup

Go to the directory of your Xcode project, and Create and Edit your Podfile and add YLProgressBar:

$ cd /path/to/MyProject
$ touch Podfile
$ edit Podfile
source 'https://github.com/CocoaPods/Specs.git'
platform :ios
pod 'YLProgressBar', '~> 3.11.0'

Install into your project:

$ pod install

Open your project in Xcode from the .xcworkspace file (not the usual project file)

$ open MyProject.xcworkspace

Manually

Download the project and copy the YLProgressBar folder into your project and then simply #import "YLProgressBar.h" in the file(s) you would like to use it in.

Contribution

Contributions are welcomed and encouraged .

Contact

Yannick Loriot

License (MIT)

Copyright 2012 - present, Yannick Loriot. http://yannickloriot.com

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
  • Getting error when iam trying to import YLprogress bar in my code.

    Getting error when iam trying to import YLprogress bar in my code.

    Hi i ran the sample code and its working fine, but when i imported the YLProgressBar to my project iam getting an error. Do i need to install Cocoa Pods? The error in .h file shows "Funcion definition is not allowed here" . I am using Xcode 6.0.1

    opened by subinrevi 10
  • Why is the text only shown at 30%?

    Why is the text only shown at 30%?

    I am using this control in my app

    If I set it to 10% I don't see the text saying 10% on the bar. It only shows up if it goes above 30%. How can I fix that?

    [_progressBarRoundedFat setProgress:0.1f animated:animated];

    opened by sambudda 9
  • Indicator text doesn't show

    Indicator text doesn't show

    Xcode 6.3.2, using YLProgressBar in storyboard, neither YLProgressBarIndicatorTextDisplayModeProgress nor YLProgressBarIndicatorTextDisplayModeTrack displays the default text. Here is the code below for reference: // Initialize progress bar self.progressBar.progressTintColor = [UIColor greenColor]; self.progressBar.indicatorTextDisplayMode = YLProgressBarIndicatorTextDisplayModeTrack; self.progressBar.behavior = YLProgressBarBehaviorIndeterminate;

    opened by iBCode 7
  • Text not updating sometimes

    Text not updating sometimes

    The bar fills correctly but sometimes the text gets stuck on a number. Specifically 10%. If I restart the app it allows the text to update. Clicking on items and removing them the progressbar and text go down normally. I am not using it in a download process more of an achievement tracking bar. Love YLProgressBar

    opened by agibson73 6
  • Any way to specify gradient colors that don't compress?

    Any way to specify gradient colors that don't compress?

    For instance, i have a progress bar that i want to go from blue to yellow to red. I specify _progressBar.progressTintColors = @[[UIColor bluecolor], [UIColor yellowColor], [UIColor redColor]] and then set it to 50%.

    I get this:

    |-blue.yellow.red-----------|
    

    When I'd really like it to be:

    |-blue.....yellow------------|
    

    So the gradient colors are more of an indication of where the progress bar is at... you wouldn't see red at 50%, only blue to yellow. at 75% you'd see blue, yellow, and half of the gradient of yellow to red.

    Does that make sense? Wondering if that's possible with the current codebase and if so, how would I achieve it?

    opened by markrickert 4
  • Wrong colour shown

    Wrong colour shown

    Hi, I've specified a particular colour for my progress bar but what is shown is different from what I specified.

    Here is the screenshot:

    screen shot 2016-08-12 at 4 31 29 pm

    As seen in screenshot, the colour I wanted is selected under the properties which is light green (#8CE600) but wrong colour is shown in the xib file.

    opened by chungfk 3
  • pod can't find  3.4.0

    pod can't find 3.4.0

    i got error [!] Unable to satisfy the following requirements: YLProgressBar (~> 3.4.0) required by Podfile

    i use #pod search YLProgressBar can't find version 3.4.0 1__lamb-mei_lamb-mei-mbp____dropbox_allpay_allpay_app_ios_app_allpay__zsh_

    opened by lamb-mei 3
  • gradient is now optional

    gradient is now optional

    Added a new property YLProgressGradientType gradientType. If the property is set to YLProgressBarWithGradient the old drawProgressBar is called. If the property is set to YLProgressBarWithNoGradient a new draw method is called thats paints the colors array but without the colors transition.

    opened by Moonlace 3
  • Performance Issue - Multiple Progress Bar

    Performance Issue - Multiple Progress Bar

    Hello,

    I am using multiple progress bars (in each table cell) to show progress for file uploading. Unfortunately, the view becomes very slow - despite the fact that the progress bars have been finished and the files have been uploaded. I noticed the the iPhone CPU is stacked to > 90%.

    The "way" i finish the progress bar is:

    YLProgressBar.progress = 1.0 YLProgressBar.YLProgressBar = YES.

    Is this the correct way to stop "normally" the progress (times) or i have missed something?

    opened by mspapant 3
  • Still slight gloss when turned off

    Still slight gloss when turned off

    There still seems to be a slight bit of white gloss when it's turned off, I would expect it to be completely flat. Would be great if you could address this

    opened by luluminshall 2
  • Vertical gradient

    Vertical gradient

    Not sure if #15 meant a vertical progress bar, but I would like to have the colours show in a vertical gradient like I have done in the Pause button. Is this possible currently? I can't seem to find any way... Thanks!

    screen shot 2016-08-25 at 1 56 10 pm

    opened by Natelegreat1 2
  • I have a progress bar for questions

    I have a progress bar for questions

    Can you set this effect? If the progress value is 120%, first 0-1, progress from left to right, then progress from right to left 0.2 (change another color)????????? Thank you very much!

    opened by qy0827a 0
  • App crashes

    App crashes

    I have added a UIView in custom cell and changed it's class to YLProgressBar but my app is crashing. I have also set flag false for showing stripes. App is crashing in updateStripesTimer when setting self.stripesTimer = nil;

    opened by rahulvyas 0
  • A tip for

    A tip for "dealloc" method never be called

    First of all, thank yannickl for this awesome project.

    We imported the version 3.10.2 into our project, and found that the dealloc method was never called.

    I found the _progressTargetTimer may never be invalid if the progress didn't reach the end. https://github.com/yannickl/YLProgressBar/blob/c7b29a65f2834a398214970b963a23d3d859956e/YLProgressBar/YLProgressBar.m#L326-L342

    So I wrote this in the host view's dealloc method to invalidate the _progressTargetTimer:

    _progressBar.progress = 0;
    

    https://github.com/yannickl/YLProgressBar/blob/c7b29a65f2834a398214970b963a23d3d859956e/YLProgressBar/YLProgressBar.m#L227-L230 https://github.com/yannickl/YLProgressBar/blob/c7b29a65f2834a398214970b963a23d3d859956e/YLProgressBar/YLProgressBar.m#L287-L322

    The dealloc method was called finally.

    opened by tatowilson 0
  • UIImage instead of indicatorTextLabel

    UIImage instead of indicatorTextLabel

    Hi,

    I am trying to place a UIImage instead of indicatorTextLabel, I have added attributed string on this label.. but the image is not showing in ylprogressbar.. it is though showing on any common label..

    Could you pls guide me ?

    opened by unlimitedK 0
Owner
Yannick Loriot
iOS developer and nodejs addict. Open-source lover and technology enthusiast.
Yannick Loriot
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 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
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 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
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
💈 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 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
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
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
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
☠️ An elegant way to show users that something is happening and also prepare them to which contents they are awaiting

Features • Guides • Installation • Usage • Miscellaneous • Contributing ?? README is available in other languages: ???? . ???? . ???? . ???? . ???? To

Juanpe Catalán 11.7k Jan 8, 2023
🌈 Highly customizable Core Graphics based gradient view for iOS

MKGradientView Highly customizable Core Graphics based gradient view Features Available gradient types: Linear (Axial) Radial (Circular) Conical (Angu

Max Konovalov 167 Dec 27, 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
📊 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
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