Three animated circles representing a loading indicator. The middle circle remains stationary, while the left circle moves toward the middle, and the right circle moves away. Then, the right circle returns to the middle, and the left circle moves outward, creating a smooth, looping motion.

Loading animation

Micro-interaction for loading states across Simplii Financial's digital products

I designed a three-dot loading animation for Simplii Financial, incorporating the brand’s logo and colours. Built in Adobe After Effects and Lottie, the versatile animation allows for easy adjustments to size, resolution, and background.

Role

Motion Designer

Timeline

2 days

Tools

Figma, Adobe after effects, lottiefiles

Problem

How might we create a delightful loading animation that aligns with Simplii Financial's brand identity?

Outcome

Delivered a scalable animation that aligns with Simplii Financial’s brand and enhances waiting moments across platforms.

Rapid Iterations

Using Lottie, I quickly tested and refined animation details like timing, easing, and positioning. This agile approach ensured the final motion felt smooth and polished while remaining lightweight for optimal performance.

Final Production

I transitioned to Adobe After Effects for the final production, leveraging my animation background to achieve precise control over keyframes, easing curves, and timing. This allowed me to fine-tune every detail, ensuring the motion was fluid, pixel-perfect, and aligned with Simplii’s brand standards. The final animation was polished, production-ready, and optimized for seamless developer handoff.