FFCircularProgressView 
FFCircularProgressView - An iOS 7-inspired blue circular progress view
This progress view is inspired by the new progress view in the App Store, iOS 7. Also the colors are taken from there.
See it in action
Requirements
FFCircularProgressView works on iOS version > 5 and is compatible with both ARC and non-ARC projects. It depends on the following Apple frameworks, which should already be included with most Xcode templates:
- Foundation.framework
- UIKit.framework
- CoreGraphics.framework
- QuartzCore.framework
You will need LLVM 3.0 or later in order to build FFCircularProgressView.
Adding FFCircularProgressView to your project
There are plenty of ways to add this view to your project. Make sure you add the aforementioned frameworks to your project as well.
GIT submodule
You have the canonical git submodule option. Simply issue git submodule add https://github.com/elbryan/FFCircularProgressView.git <path> in your root folder of your repository.
CocoaPods
- Add a pod entry to your Podfile dependencies file such as
pod 'FFCircularProgressView', '>= 0.1'. - Install the pod(s) by running
pod install. - Import the progress view with `#import "FFCircularProgressView.h" wherever you need in your project.
Source files
Manually add the source files to your project. The files you need are 'FFCircularProgressView.h', 'FFCircularProgressView.m', 'UIColor+iOS7.h', 'UIColor+iOS7.m'.
Usage
Just use it as it is a normal UIProgressView. Make sure you set the progress value in the main thread ;)
double delayInSeconds = 2.0;
dispatch_time_t popTime = dispatch_time(DISPATCH_TIME_NOW, (int64_t)(delayInSeconds * NSEC_PER_SEC));
dispatch_after(popTime, dispatch_get_main_queue(), ^(void){
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_BACKGROUND,0), ^{
for (float i=0; i<1.1; i+=0.01F) {
dispatch_async(dispatch_get_main_queue(), ^{
[circularProgressView setProgress:i];
});
usleep(10000);
}
});
});
You can also control the progress view spin animation by using the following two methods to start and stop the spinning, respectively:
// Start spinning
[circularProgressView startSpinProgressBackgroundLayer];
// Stop spinning
[circularProgressView stopSpinProgressBackgroundLayer];
Acknowledgments
The code to draw the tick has been adapted from GSProgressView.
License
This code is distributed under the terms and conditions of the MIT license.
Attributions
I do not demand to be mentioned in your apps nor to receive any kind of compensation if you use this code. Yet, I would like to have feedbacks if you use it and you like it.
Follow me on Twitter: @elbryanlos
Third Party Bindings
Android
Are you an Android developer and you love this progress view? No problem! A couple of folks ported it to Android OS and you can get it here.
React Native
You may now use this library with React Native via the module here
Thank you guys!
161 Dec 5, 2022
2.1k Dec 31, 2022
1.3k Jan 5, 2023
445 Oct 13, 2022
490 Dec 16, 2022
42 Dec 5, 2022
18 Nov 24, 2022
143 Dec 23, 2022
202 Dec 22, 2022
79 Apr 18, 2022
583 Dec 6, 2022
940 Dec 22, 2022
238 Nov 2, 2022
2.1k Dec 19, 2022
36 Dec 9, 2021
46 Aug 12, 2022
79 Feb 27, 2021
3 Dec 3, 2021
8 Sep 22, 2022