Streem loading spinner

Objective
A simple animation, reflecting Streem’s branded style, indicating activity and keeping the user company for up to a few seconds while content is loaded.

Design reasoning

Simple shapes, rounded corners, and capsule shapes are established elements in Streem’s welcoming brand style. By setting the two arcs to expand and contract as they rotate in opposite directions, I created a balance of order and complexity that holds the user’s attention without distracting them from their original intent.

Deliverables
The animation is designed to be compatible with Lottie, a vector animation library developed by Airbnb Design, allowing it to be exported as a 3-kilobyte Json file and played back at an unlimited resolution and frame rate — within a desktop or mobile app, or in any browser — as seen above.

Reception
The animation is used in Streem’s mobile applications — sometimes embedded inside a button as shown below.

Example of the spinner animation in use on the Streem iPad app