ActivityIndicatorView

A set of 50 awesome loading indicators, FREE to use.

Written in pure Swift, using Core Animation.

Made with Flow.

Story

We created and shipped all 50 of these animations in 48 hours. We drew on inspirations from Dribbble, most designs were created in Sketch or Figma, and some were rolled from scratch in Flow. All code was exported using the Custom iOS Activity Indicator option in Flow.

Want to know how we did this so quickly? Check out our article: Animate and Ship 50 iOS Spinners in 48 hours

Usage

Each class has its own unique initializer. For example:

GriddyActivityIndicatorView(frame: frame)

You can also use our convience class, like so:

ActivityIndicators.create(.griddy)

Structure

We offer a common, basic subclass of UIActivityIndicatorView.

ActivityIndicatorView: UIActivityIndicatorView {
  ...
}

This basic handles the construction of the activity view, provides the space for common styling additions, and syncs playback with native activity indicator methods.

Custom Subclasses

Each indicator is a subclass of ActivityIndicatorView.

GriddyActivityIndicatorView: ActivityIndicatorView {
  ...
}

Native Animation Code

Animations are written in Swift. They require a few lightweight classes that can be found in FlowCommoniOS.

Our animations take full advantage of native Core Animation, most prominently CAKeyFrameAnimation.

Here is a sample of our animation code:

let strokeEndAnimation: CAKeyframeAnimation = {
    let keyframeAnimation = CAKeyframeAnimation()
    keyframeAnimation.keyPath = "strokeEnd"
    keyframeAnimation.values = [0.16, 0.99]
    keyframeAnimation.keyTimes = [0, 1] 
    keyframeAnimation.timingFunctions = [.easeInEaseOut]
    keyframeAnimation.duration = duration
    return keyframeAnimation
}()

Installation

When we ship a cocoapod for this project, we'll update the instructions here.

For now, please download and install manually.

1. Download the project.
2. Install FlowCommon into your project (copy the files in this repo, or install via FlowCommoniOS).
3. Copy ActivityIndicatorView.flow
4. For each indicator your want to use, copy three files into your project:

<Animation>ActivityIndicatorView.swift
<Animation>Timeline.swift
<Animation>View.swift

For example, if you wanted to use the Griddy spinner, you would copy:

GriddyActivityIndicatorView.swift
GriddyTimeline.swift
GriddyView.swift

Types & Shots

We love Dribbble and a lot of the animations in this project were originally inspired by other people's great work, which we riffed on and added our own flair and rebounded with links to the original post and designer. Each indicator is posted to Flow's Official Dribbble Account, and in the writeup for each shot we've referenced the original, and the maker.

Over the next 25 days we're posting all 50 animations / indicators and will add a link below as the shots go live.

Below is the list of all 50, and the names are identical to the enum cases in the project.

type name	shot
barista	Barista
breathe	Breathe
caught	Caught
charting	Charting
compass	Compass
cradle	Cradle
dashed	Dashed
deceptive	Deceptive
dialed	Dialed
differences	Differences
dottingAroundCircle	Dotting Around - Circle
dottingAroundSquare	Dotting Around - Square
dottingAroundTriangle	Dotting Around - Triangle
doubleTime	Double Time
fire	Fire
flowWheel	Flow Wheel
gradientRing	Gradient Ring
griddy	Griddy
gridlock	Gridlock
hal	Hal
hexa	Hexa
hicks	Hicks
infinity	Infinity
magician	Magician
mountains	Mountains
moveAlong	Move Along
nonover	Nonover
overlapping	Overlapping
penta	Penta
quarbit	Quarbit
queued	Queued
rainbow	Rainbow
reflect	Reflect
ripley	Ripley
ringItIn	Ring It In
roulette	Roulette
shiftDrift	Shift'n'Drift
shkwv	Shkwv
showingUp	Showing Up
skeu	Skeu
spinUp	Spin Up
spindle	Spindle
spinning	Spinning
splayed	Splayed
standby	Stand By
stretchAround	Stretch Around
squareUp	Shape Up
triplex	Triplex
tumble	Tumble
xact	Xact