Axess Advisory Software Loading Animation

A lightweight SVG animation solution

Creative Goals

Axess requested a loading indicator for their in-house software — and needed something really lightweight and subtle.

I’m no stranger animating 2D translations, self-drawing line-paths and other timeline-based effects in After Effects for video production.

Where I am a novice to animation is on the web. Well not anymore. Enter Anime.js. This Javascript library changed the game. No more nightmares about writing CSS Keyframes. No doubt you’ll get buttery smooth animations with pure CSS, but for more complex timelines, Anime.js really shines.

This animation was completed for a client that found me via Upwork. The animation loops — a universal signal, things are loading. 

The total SVG and JS weighs in at 29 kB 😇

Like what you see?

Join my newsletter for web stuff, design, and everything in-between. Delivered right into your inbox. You can unsubscribe anytime.

Leave a Reply

Your email address will not be published. Required fields are marked *