Custom loading animations
Give an unknown wait a loop people can recognize.
A loading animation tells someone the product is still working. The older name for it is a throbber. A plain bar can carry that message. A custom loop can also give the wait a rhythm, so the pause feels attended to.
People leave a screen when they cannot tell whether anything is happening. A measured bounce rate is a separate question, and this piece does not claim a number for it. What the loop can do is show activity. If you know the work will finish, move a bar forward and keep it moving forward. If you do not know how long it will take, use a loop. The loop should change, then return to its first frame without a jump.
These are the original GIFs from a tutorial I published in 2017. Each loop was drawn in Sketch and timed in Principle. One property changes. The sequence repeats. The recordings under each finished loop are those Sketch and Principle sessions, in the order they were published.
Stretching dots
Four marks, in gold, pink, green, and blue, stretch in turn. That is the move Slack uses: pieces pulling into place.
Trading bars
Two white bars trade height inside a blue square. That is the move Trello uses, like a column being scanned.
A turning ring
A dashed blue ring turns. A spinner is the most familiar signal, so it suits a moment that needs no extra character.
Two dots trading places
A pink dot and a blue dot trade places. That is the move Flickr uses, and it fits a wait that is about an exchange.
A word still being written
The word LOADING gains its periods one at a time. An ellipsis suits a line of text that is still being written.
Dots that pulse
Two blue dots trade scale. The change is small, and the loop stays easy to read.
A ring of dots
Five orange dots sit around a blue center and turn as one group, in the arrangement of a die.
A circle that pulses
A small orange dot sits inside a blue ring. The ring scales outward and fades, then the loop starts again.
Jumping dots
Orange, blue, and green dots jump in turn. The move suits a short, friendly pause.
A classic loader
A gray ring carries a blue quarter that travels around it. The blue piece is a mask, not a new shape on every frame.
Make the next one yours
Take the color from the interface, the way these recordings keep the colors of the products they follow. Ease the stretch and the jump, so each end has a moment of rest. Keep a rotation linear, or the ring will seem to hesitate.
Once a few of these feel familiar, a new one is easier to invent. Start from a circle or a short word. Change one thing. Loop it. Then decide whether that motion belongs to the product.
