Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/polqf/FillableLoaders
Completely customizable progress based loaders drawn using custom CGPaths written in Swift
https://github.com/polqf/FillableLoaders
Last synced: 6 days ago
JSON representation
Completely customizable progress based loaders drawn using custom CGPaths written in Swift
- Host: GitHub
- URL: https://github.com/polqf/FillableLoaders
- Owner: polqf
- License: mit
- Created: 2015-08-02T18:01:17.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2019-09-25T08:45:14.000Z (about 5 years ago)
- Last Synced: 2024-10-29T17:40:45.345Z (about 1 month ago)
- Language: Swift
- Homepage: https://cocoapods.org/pods/FillableLoaders
- Size: 2.54 MB
- Stars: 2,113
- Watchers: 43
- Forks: 164
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-ios - FillableLoaders - Completely customizable progress based loaders drawn using custom CGPaths written in Swift. (UI / Activity Indicator)
- awesome-loading-indicators - FillableLoaders - Completely customizable progress based loaders drawn using custom CGPaths written in Swift. (Swift)
- awesome-ios - FillableLoaders - Completely customizable progress based loaders drawn using custom `CGPaths` written in Swift. [•](https://raw.githubusercontent.com/polqf/FillableLoaders/master/Images/waves.gif) (Content / Progress Indicator)
- awesome-ios-star - FillableLoaders - Completely customizable progress based loaders drawn using custom CGPaths written in Swift. (UI / Activity Indicator)
README
![](https://img.shields.io/badge/language-swift-blue.svg)
![](https://img.shields.io/badge/version-1.3.0-red.svg)
[![Carthage compatible](https://img.shields.io/badge/Carthage-compatible-4BC51D.svg?style=flat)](https://github.com/Carthage/Carthage)
# FillableLoaders#### Completely customizable progress based loaders drawn using custom `CGPath`s written in Swift
Waves
Plain
Spike
Rounded### Demo:
### Changelog:
- __1.3.0__ (24 Sep 2016)
- Swift 3.0
- __1.2.6__ (8 Apr 2016)
- Fixing issue with width assert
- Adapted to Swift 2.2
- __1.2.5__ (11 Dec 2015)
- Precompiled framework using Xcode 7.2
- __1.2.4__ (28 Oct 2015)
- Fixing issue when showing loader after removing it
- __1.2.2__ (27 Oct 2015)
- Precompiled framework using Xcode 7.1
- __1.2.1__ (25 Oct 2015)
- Added the possibility to add a loader to a desired UIView
- Updated to Swift 2.0
- __1.1.1__ (2 Sep 2015)
- Added Carthage Support
- Added animation when hidding loader
- __1.0.1__ (17 Aug 2015)
- Removed unused code
- __1.0.0__ (7 Aug 2015)
- Progress based loaders :tada:
- Added documentation to all the public properties and functions
- __0.0.2 Initial Release__ (3 Aug 2015)### Quick Start:
#### - Progress based behaviour
Therea are only 2 necessary things to make the progress based loader work:- Create the loader using `showProgressBasedLoaderWithPath(path:)` or `createProgressBasedLoaderWithPath(path:)`
- To update the fill progress, update the `progress` property of the loader, which goes from `0.0` to `1.0`#### - Creation
There are four main methods to create the loaders:`showProgressBasedLoaderWithPath(path:)`, `createProgressBasedLoaderWithPath(path:)`,`showLoaderWithPath(path:)` and `createLoaderWithPath(path:)`
`showLoaderWithPath(path:)` or `showProgressBasedLoaderWithPath(path:)` are going to call the create one, and after it, are going to call the `showLoader()` method.
So, it is just a helper method to do everything at once.
If you want to create the loader, and not show it at the same moment, you can use `createProgressBasedLoaderWithPath(path:)` or `createLoaderWithPath(path:)` to create it, and when you want to show it, just call `showLoader()`
Sample code:
``` swift
//PROGRESS BASED:
var loader = WavesLoader.createProgressBasedLoaderWithPath(path)
loader.loaderColor = UIColor.redColor()
...
//Do other stuff
...
loader.showLoader()
//BASICvar loader = WavesLoader.createLoaderWithPath(path)
loader.loaderColor = UIColor.redColor()
...
//Do other stuff
...
loader.showLoader()
```#### - Showing loader in desired view:
All the methods wave the variant version where you can pass it the view in which you want to add the loader:- `showProgressBasedLoaderWithPath(path:onView:)`
- `createProgressBasedLoaderWithPath(path:onView:)`
- `showLoaderWithPath(path:onView:)`
- `createLoaderWithPath(path:onView:)`#### - Deletion:
Just call the method `removeLoader()` and the loader will disappear and will also be removed from its superview.Sample code:
``` swift
loader.removeLoader()
```### Customization:
Apart from being able to customize the loader shape, you can also customize other properties of the loader. Take a look at the list:
- __progressBased__: Bool
Indicates if the loader movement is progress based or not (Default: false)
- __progress__: CGFloat
Loader fill progress from 0.0 to 1.0 . It will automatically fire an animation to update the loader fill progress
- __backgroundColor__: UIColor?
Background of the loader view (transparent by default)
- __loaderColor__: UIColor?
Color of the filled loader
- __loaderBackgroundColor__: UIColor?
Color of the unfilled loader
- __loaderStrokeColor__: UIColor?
Color of the path stroke
- __loaderStrokeWidth__: CGFloat
Width of the path stroke
- __loaderAlpha__: CGFloat
Alpha of the loader view (1.0 by default)
- __cornerRadius__: CGFloat
Corner radius of the loader view (0.0 by default)
- __duration__: NSTimeInterval
Duration of the animations (10.0 by default)
- __rectSize__: CGFloat
Height of the loader view
- __swing__: Bool
Bool to indicate if the loader has to swing when going up (small rotation, not available for the Plain loader)##### Extra property for `Spikes` and `Rounded` loaders:
- __-spikeHeight__: CGFloat
Height of the spike### Installation:
#### • CocoaPods```
use_frameworks!pod 'FillableLoaders', '~>1.3.0'
```
#### • Carthage```
github "poolqf/FillableLoaders" ~> "1.3.0"
```
#### • ManuallyTo manually add `FillableLoaders` to your project you just need to copy the `Source` folder files.
### How to create my own CGPath?
###### :warning: The CGPath bounds cannot exceed the bounds of the loaderView:
- Width: Screen width
- Height: rectSize property#### • Manually
``` swift
let path = CGPathCreateMutable()
CGPathMoveToPoint(path, nil, 0, height/2)
CGPathAddLineToPoint(path, nil, width + 100, height/2)
CGPathAddLineToPoint(path, nil, width + 100, height*2)
CGPathAddLineToPoint(path, nil, 0, height*2)
CGPathCloseSubpath(path)
return path
```#### • PaintCode
__[PaintCode](http://www.paintcodeapp.com)__ is a realy powerful Mac app that can do a lot of things.
You can just draw things, and it will __automagically__ create the code for youIn this case we can use it to create BezierPaths, and extract from there the CGPath.
In the case of drawing a star, it is going to give us this code:
``` swift
//// Star Drawing
var starPath = UIBezierPath()
starPath.moveToPoint(CGPointMake(180, 25))
starPath.addLineToPoint(CGPointMake(195.16, 43.53))
starPath.addLineToPoint(CGPointMake(220.9, 49.88))
starPath.addLineToPoint(CGPointMake(204.54, 67.67))
starPath.addLineToPoint(CGPointMake(205.27, 90.12))
starPath.addLineToPoint(CGPointMake(180, 82.6))
starPath.addLineToPoint(CGPointMake(154.73, 90.12))
starPath.addLineToPoint(CGPointMake(155.46, 67.67))
starPath.addLineToPoint(CGPointMake(139.1, 49.88))
starPath.addLineToPoint(CGPointMake(164.84, 43.53))
starPath.closePath()
UIColor.grayColor().setFill()
starPath.fill()```
The only thing we have to do here is extract the CGPath from the UIBezierPath like so:
``` swift
let myPath = starPath.CGPath
var myLoader = WavesLoader.showProgressBasedLoaderWithPath(myPath)
```#### • SVG + PaintCode
A feature that I `LOVE` from PaintCode is that you can import an .svg file, and it is going to create the code to create its BezierPath. Completely awesome.
That's how I did the Github and Twitter logos, for example.
### Technical details:
- Swift 3.0
- Animations using CAKeyFrameAnimation### Licenses
All source code is licensed under the MIT License.If you use it, i'll be happy to know about it.
### Pol Quintana - [@poolqf](https://twitter.com/poolqf)