CollegeVine Mahdi Farra

Cheerful loading animation

  • Save

The goal of this project was to design a loading spinner that is:
- Cheerful to our users.
- Quick to load.
- Created and animated in code.

To do that I first saved the logo as an SVG image and took it to Codepin.io to play with it and see how I can make a cool animation out of it.

After trying a few different designs we've agreed that the one with the green background works best as it looks clear on different background colors throughout different pages of CollegeVine's platform.

You can see the code for all these iterations here:
https://codepen.io/mahdi/pen/ooKxaK

P.S. Please don't judge me for the way I named the CSS classes.

keyboard shortcuts: L or F like