SpinKit
SpinKit copied to clipboard
Beautiful spinners based on tobiasahlin's CSS SpinKit. Demystifying iOS Animations
SpinKit
Based on tobiasahlin's CSS SpinKit, SpinKit is a friendly framework that provides with a set of spinners or loaders. They're perfect to use when your App faces a heavy load task or to help with a transition between scenes.
Usage
Every Spinner
is a view that implements the SpinnerType
interface and exposes four properties to customize it. To start a spinner, simply call its startLoading
method. Here's some sample code:
let spinner = WaveSpinner(primaryColor: selectedColor,
frame: CGRect(origin: .zero,
size: CGSize(width: 50,
height: 50)))
spinner.startLoading()

Customization
You can change its color, speed of the animation and modify its content insets:
spinner.primaryColor = UIColor.green
spinner.contentInsets = UIEdgeInsets(top: 20, left: 20, bottom: 20, right: 20)
spinner.animationSpeed = 3 // Speeds up the animation by 3
Note: Don't change these properties once the spinner has started the animation. Some of them are used as part of the animation and it might not have the expected result.
You can also set the isTranslucent
property to false (default is true). This makes the view take the primaryColor
and show the spinner in a white tint.
-
Translucent spinner
-
Opaque spinner
Available Spinners
Choose the one you like the most ;)
Rotating plane

Double bounce

Wave

Wandering cubes

Pulse

Chasing dots

Three bounce

Circle

Cube grid

Fading circle

Folding cube
