Build an Animated SVG Loading Icon in 5 Minutes

3 min readJan 14, 2015

See that choppy animated gif spinning icon up there ^

Is it possible to animate SVGs at a higher frame rate, this hurts my eyes? — fearsome_crocostimpy

The answer, is YES! Click here to see the beautiful SVG (and even tinker with the code like an Orgrimmar gnome to find out how it works).

With the rise in popularity of SVG’s, now is the perfect time to create new assets that can be used responsively across all screen sizes and resolutions. I’ll walk you through creating a simple animated loading icon in your editor of choice. (I’m using Adobe Illustrator)

If you have any animated SVG’s you are proud of tell me about them on twitter.

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

View the Demo ——->

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>

See more spinners on github or codepen

See these spinners on codepen or github.

Originally published at articles.dappergentlemen.com on January 13, 2015.