Build an Animated SVG Loading Icon in 5 Minutes

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 v 18.1.1).

animated svg spinning loading icon

If you have any 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:

Create a blank 80px x 80px 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 document.

Spinner 3/4 shape in Adobe Illustrator

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>

Make it Spin

img

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.