Pure SVG and CSS loading icon
Hey! Just so you know, this article is over 2 years old. Some of the information in it might be outdated, so take it with a grain of salt. I'm not saying it's not worth a read, but don't take everything in it as gospel. If you're curious about something, it never hurts to double-check with a more up-to-date source!
I had the idea last night when walking back from the gym to produce a loading icon for a web page made purely of SVG and CSS graphics and animation. The reason behind this is that I strongly feel like CSS animations and SVG graphics are going to bring a lot to the table in terms of making web pages looking aesthetically beautiful and interactive. Before I set out and built the icon web page, I made myself some rules - > I am allowed to look at how to rotate using CSS > The loading icon must be made by myself in either CSS or Illustrator > I am allowed help but no tutorials which detail on how to do everything needed for this project (Animate and build the icon) I began by grabbing a quick testing image for my web page animation. I found a list of CSS shapes here https://css-tricks.com/examples/ShapesOfCSS/ and chose to use a crescent moon for testing purposes. I then looked into how to animate and rotate the CSS image. It took less than a minute to get it spinning. Now all that was left was to create the SVG file. This was my first time creating and SVG graphic before but took me no time as it was a very straight forward process. 
Once the SVG loading icon was produced, I then replaced the CSS icon with the image and it is complete! Obviously, if it was used there would be an action event to trigger the rotation, but for purposes of this mini-project I've made the object rotate on a loop. The final codepen can be found here :https://codepen.io/JackDavies/full/bVojvG/
