A fun perk of developing React applications is taking full advantage of easily being able to enter in and out of a loading state. I started with the generic "Font Awesome gear spin", but quickly determined that I could be having more fun with it. I started investigating CSS3 animations, something I'd worked a bit with, but not extensively.

I wanted the animations to be quick to load, since there's a good chance they'd only be visible for a second. This mean I was going to try and avoid using images if possible. Using some EPS files for logos our designers gave us, I was able to export the information into SVG. After following a few tutorials online, I was able to write a SASS mixin that incorporated the data into my CSS.

I also wanted to make soup cans, but thankfully these are pretty simple: just blue rectangles with white squares on them.

With all of my assets in place, I was free to have fun with some animations:

1. Appear and Slide

See the Pen Soup Pot Loader - Appear and slide by Jamie (@jamiebclark) on CodePen.


The first animation was simple. No cans doing anything. I just wanted the soup pot to appear to fill up and then slide off screen. For the full-up effect, I used a linear gradient:
 background: linear-gradient(180deg, $soup-pot-empty-bg 50%, $soup-pot-full-bg 50%);

Putting them both at 50% ensures a hard line. From there I just animated that percent going form 0% to 100%;

2. Can Drop

See the Pen Soup Pot Loader 2 - Can Drop by Jamie (@jamiebclark) on CodePen.


When a user reports their totals for the year, it's the culmination of participating with Souper Bowl of Caring. It can also sometimes be a slow process if everyone is using the site at once. Because of both of these things, I wanted a special feeling when they clicked the "Report" button. For this I wanted the cans to tumble into the pot as it's growing and filling up. Same basic animation as the previous one, but I was able to add a few of the can elements I'd created. This hopefully conveyed the feeling of filling up a soup pot and shipping it out into the world to do some good.

3. Cans hop

See the Pen Soup Pot Loader 3 - Cans hop by Jamie (@jamiebclark) on CodePen.


I wanted a different loading vibe when a user was simply creating their account. I wanted the cans to be hopping inside of the pot - excited to be getting out.

4. Can toss

See the Pen Soup Pot Loader 4 - Can Toss by Jamie (@jamiebclark) on CodePen.


Once again, I needed an animation with a slightly different feel. When a user was getting ready to report, I wanted a feeling of preparing their collection, so tossing cans into a pot seemed to be the best way to convey.