mohsinalimat/processloadingview

ayman-ibrahim/ProcessLoadingView

ProcessLoadingView

ProcessLoadingView is a CABasicAnimation based loading animation inspired from:
https://dribbble.com/shots/1118077-Proces-animation

Installation

CocoaPods

ProcessLoadingView is available on CocoaPods. Add the following to your Podfile:

pod 'ProcessLoadingView'

Manually

Just add the processView folder to your project.

Usage

(see sample Xcode project Demo)

create a view in the storyboard and give it's class 'ProcessLoadingView' then connect an outlet to it.

Code

//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:

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 get the locations in the circle circumference:

License

This code is distributed under the terms and conditions of the MIT license.