Create the Artboard

Create a blank document to contain the animated SVG loading spinner in your graphics editor of choice.

Here is how I set up the document in Adobe Illustrator

Here is the document’s code

<svg version=”1.1"

id=”svg-spinner”

xmlns=”http://www.w3.org/2000/svg"

xmlns:xlink=”http://www.w3.org/1999/xlink"

x=”0px”

y=”0px”

viewBox=”0 0 80 80"

xml:space=”preserve”>

</svg>

As you can see in the code above, we set the viewBox min values at 0 and max values at 80 which gives us an 80 x 80 document artboard.

Create the Shape you Want to Spin

Here is a simple 3/4 circle. I converted the path to an outline and saved the Adobe Illustrator document as an SVG. Once saved you can open up the SVG file in your text editor of choice.

Here is the code so far

<svg version=”1.1"

id=”svg-spinner”

xmlns=”http://www.w3.org/2000/svg"

xmlns:xlink=”http://www.w3.org/1999/xlink"

x=”0px”

y=”0px”

viewBox=”0 0 80 80"

xml:space=”preserve”

>

<path

id=”spinner”

fill=”#D43B11"

d=”M40,72C22.4,72,8,57.6,8,40C8,22.4,

22.4,8,40,8c17.6,0,32,14.4,32,32c0,1.1–0.9,2–2,2 s-2–0.9–2–2c0–

15.4–12.6–28–28–28S12,24.6,12,40s12.6,

28,28,28c1.1,0,2,0.9,2,2S41.1,72,40,72z”

>

</path>

</svg>

Make it Spin

Finally we will add the animation (this can’t be done in Illustrator and must be done in code).

We will rotate the svg from a starting point of 0 deg to 360 deg at the center of the document which is half of the viewBox. The viewBox is 80, so the center is 40 on the x and y axes.

We will set a time duration of the animation to 0.8 of one second and repeat the animation for all of time. Forever. Infinity.

<animateTransform

attributeType=”xml”

attributeName=”transform”

type=”rotate”

from=”0 40 40"

to=”360 40 40"

dur=”0.8s”

repeatCount=”indefinite”

/>

Let’s See it in Action!

<svg version=”1.1"

id=”svg-spinner”

xmlns=”http://www.w3.org/2000/svg"

xmlns:xlink=”http://www.w3.org/1999/xlink"

x=”0px”

y=”0px”

viewBox=”0 0 80 80"

xml:space=”preserve”

>

<path

id=”spinner”

fill=”#D43B11"

d=”M40,72C22.4,72,8,57.6,8,40C8,22.4, 22.4,8,40,8c17.6,0,

32,14.4,32,32c0,1.1–0.9,2–2,2 s-2–0.9–2–2c0–15.4–12.6–28–28–

28S12,24.6,12,40s12.6, 28,28,28c1.1,0,2,0.9,2,2S41.1,72,40,

72z”



<!— ANIMATION START —->



<animateTransform

attributeType=”xml”

attributeName=”transform”

type=”rotate”

from=”0 40 40"

to=”360 40 40"

dur=”0.8s”

repeatCount=”indefinite”

/>

</path>

</svg>

If you have any SVG’s you are proud of or if you have any comments or corrections contact me on twitter or dribbble.

See more spinners on github or codepen