CSS-animation loading component

This interaction is part of a wider product that augments the role of a traditional financial advisor for customers preparing for retirement. I created this loading animation entirely in HTML and CSS basing it on an After Effects file from another designer on the project.

Problem

We needed a pause in the journey for the backend to run a series of calculations, but also needed to prime the customer for what was to come and convey what was going on behind-the scenes.

Solution

The light-weight loader icon adds a bit of excitement to this stage of the product, primes the customer about the income number they are about to see and illustrates the value of the tool by explaining the number crunching that is happening.

My role

  • HTML
  • CSS
  • JavaScript
  • Prototyping

⬇️ Try it out! Click 'Calculate my income' ⬇️