Animated SVG loading Icon
First, some basics. SVG, first defined in 1999, stands for scalable vector graphics and is based on mathematical points, rather than pixel units. The main benefits of SVG are scalability and increased independence from rasterized image files (for example: .gif, .png, .jpg files).
Now for the code for creating the animated SVG icon (see the stand-alone demo here).
The HTML and CSS are fairly simple, listed below in Figure 2. Notice the svg and path elements in the HTML are based on XML syntax. The svg element sets the bounds of the element and the path is a line composed of points. The "d" attribute of the path element stands for "description". The "M", for "move to", in the value of d represents the x and y coordinates where the path will begin. The CSS sets the size of a div containing the svg, and rotates that div continuously around its center in 2 second periods.
That's it! I hope you enjoyed this write-up, and please share it if you found it useful.