ProcessLoadingView is a step indicator loading animation built using CABasicAnimation
ProcessLoadingView
is a step indicator loading animation built using CABasicAnimation
, where the user can nearly customize everything in it:
inspired from: https://dribbble.com/shots/1118077-Proces-animation
Predfined locations in circumference | Setting variable number of items (8) |
---|---|
ProcessLoadingView
is available on CocoaPods.
Add the following to your Podfile
:
pod 'ProcessLoadingView', '~> 0.1.2'
Just add the processView folder to your project.
(see sample Xcode project Demo) create a view in the storyboard and give it's class 'ProcessLoadingView' then connect an outlet to it.
ProcessLoadingView
can have variable number of items based on your need, you only need the following steps to get it runing:
1- put a UIView
in your storyboard and give it a class ProcessLoadingView
.
2- connect an outlet to it, call it viewProcess
3- create options object and assign it to viewProcess
:
let stepComplete = 3
let totalSteps = 4
var options = ProcessOptions()
options.setNumberOfItems(number: totalSteps)
options.images = [(img1, nil), (img2, nil), (img3, nil), (img4, nil)]
options.stepComplete = stepComplete
options.bgColor = bgColor
viewProcess.options = options
setNumberOfItems
method.options.images
should be assigned an array it's count equals to the total number of steps.//totalSteps: adding 8 process items, this number can be increased or decreased ;)
let totalSteps = 8
var options = ProcessOptions()
options.setNumberOfItems(number: totalSteps)
options.stepComplete = 3
options.inSpeed = 1.2
options.images = imageOpts(of: step, totalSteps: totalSteps)
options.mainTextfont = UIFont.boldSystemFont(ofSize: 22)
options.subTextfont = UIFont.boldSystemFont(ofSize: 16)
options.ItemSize = 30
options.radius = 120
options.bgColor = bgColor
options.completedPathColor = colorBlue
options.mainTextColor = .white
options.subTextColor = colorOrange
viewProcessOutlet.options = options
If you want a custom places on the circle shape, do not use this method :
options.setNumberOfItems(number: totalSteps)
and use:
var options = ProcessOptions()
let curvesStartRadians = [(3 * CGFloat.pi)/2, (23 * CGFloat.pi) / 12, (CGFloat.pi / 3), ((2 * CGFloat.pi) / 3), (13 * CGFloat.pi) / 12]
let curvesEndRadians = [(23 * CGFloat.pi) / 12, (CGFloat.pi) / 3, (2 * CGFloat.pi) / 3, (13 * CGFloat.pi) / 12, (3 * CGFloat.pi)/2]
options.curvesStartRadians = curvesStartRadians
options.curvesEndRadians = curvesEndRadians
options.stepComplete = 3
options.inSpeed = 1.2
options.images = imageOpts(of: step, totalSteps: curvesStartRadians.count)
options.mainTextfont = UIFont.boldSystemFont(ofSize: 22)
options.subTextfont = UIFont.boldSystemFont(ofSize: 16)
options.ItemSize = 30
options.radius = 120
options.bgColor = bgColor
options.completedPathColor = colorBlue
options.mainTextColor = .white
options.subTextColor = colorOrange
viewProcessOutlet.options = options
To start Animation:
viewProcess.start(completed:
{
//code to run after finishing
})
Reverse animation without removing the items:
viewProcess.reset(removeItems: false)
{
//code to run after finishing
}
Reverse animation then removing the items:
viewProcess.reset(removeItems: true)
{
//code to run after finishing
}
This code is distributed under the terms and conditions of the MIT license.