Don’t settle for a tired spinner. Add some extra character to your site with a custom loading animation built with SVG.

Some years ago, I made a tool for finding operational problems for customers of a major Danish telecom company (you can see it here, but it’s in Danish, so you might not care). One of the things that I thought put the service a step above most projects was the design, particularly the custom loading animation that was displayed while a user searched for problems at a particular location.

This custom animation was a little YouSee repair van speeding along to fix the customer’s problems. It was originally designed by Ronnie S. Jakobsen as a proof-of-concept placeholder, and it proved to be so popular that it was kept on.

As SVG becomes more common, I would expect to see more individualized loading animations, and in this article, I will share some techniques on how you can adapt pretty much any SVG icon to be a loading animation.

Finding an icon to use

So, first off, we should have an icon to play with. Let’s try this one from The Noun Project as a starting point.

I have done some minimal changes to this in removing unneeded markup and giving the head and body parts of the icon descriptive IDs.

#svg #web-development #react