In this tutorial you’re going to learn how to make a very simple loader icon using SVG animations. What we’ll be covering is different from CSS animations—SVG animations reside in the actual SVG markup. Let’s kick things off by taking a look at the syntax.
Watch the Screencast
Quick Refresher in Hand-Coding SVG
Before we move on, if you need to remind yourself of the basics where hand-coding SVG is concerned, Kezz has you covered:
The Syntax
Most modern browsers support animating SVGs by using something called “SMIL”, which stands for “Synchronized Multimedia Integration Language”. This language allows you to animate certain foundational, and transformational attributes of an SVG. For example, you can animate X and Y positions, a rotate transformation, or the fill color of an element. Let’s look at two examples which will help you understand the basics.
Example 1
For our first example, we start with an <svg> element, which has width, height, and viewBox attributes set.
<svg width="500px" height="500px" viewBox="0 0 500 500"> </svg>
We then place a rectangle, with some positioning values, dimensions, and a fill color, within it.
<svg width="500px" height="500px" viewBox="0 0 500 500">
<rect x="0" y="0" width="100" height="100" fill="#feac5e">
</rect>
</svg>To animate this rectangle we’re going to use a self-closing <animate /> element, inside the <rect>.
Within that <animate /> we add some attributes, firstly using attributeName to define which of the <rect>’s attributes we want to animate (in this case the x position).
Then we define a from value and a to value. We use dur to specify a duration, and repeatCount to state what kind of repetition we’d like the animation to have.
<svg width="500px" height="500px" viewBox="0 0 500 500">
<rect x="0" y="0" width="100" height="100" fill="#feac5e">
<animate attributeName="x" from="0" to="500" dur="2s" repeatCount="indefinite" />
</rect>
</svg>That’s it! You’ll see in our demo that we now have an animating element within an SVG.
We can animate more than just one attribute on our rectangle too; all we need to to is add another <animate /> which specifies another attribute. Let’s animate the width as well:
<animate attributeName="x" from="0" to="500" dur="2s" repeatCount="indefinite" /> <animate attributeName="width" to="500" dur="2s" repeatCount="indefinite" />
How about a third? Let’s change its fill color too.
<animate attributeName="x" from="0" to="500" dur="2s" repeatCount="indefinite" /> <animate attributeName="width" to="500" dur="2s" repeatCount="indefinite" /> <animate attributeName="fill" to="black" dur="2s" repeatCount="indefinite" />
Example 2
The second example will animate a transform attribute. We’ll start with the same <svg>, but with a slightly different <rect>:
<svg width="500px" height="500px" viewBox="0 0 500 500">
<rect x="250" y="250" width="50" height="50" fill="#4bc0c8">
</rect>
</svg>This time, instead of adding an <animate /> element, we’re going to add an <animateTransform /> element. Its properties target an attributeName, then ask for the type of transform. We can use begin to specify when the animation should begin, dur for the duration, then specify its coordinates in the form of three values: angle, x, and y. In our case we’re using these coordinates to specify a rotational transform.
<svg width="500px" height="500px" viewBox="0 0 500 500">
<rect x="250" y="250" width="50" height="50" fill="#4bc0c8">
<animateTransform attributeName="transform" type="rotate" begin="0s" dur="10s" from="0 200 200" to="360 400 400" repeatCount="indefinite" />
</rect>
</svg>As with our previous example, we can add more <animateTransform /> elements to animate more than one property. However, in the case of transforms, we can only run them in sequence–it’s not possible to animate multiple properties at the same time.
Try it yourself, by adding a second animation targeting scale:
<animateTransform attributeName="transform" type="scale" begin="0s" dur="3s" values="1,1; 2,2; 1,1" repeatCount="indefinite" />
These two examples have shown you the basics of working with SVG animations. Let’s use what we’ve learned to create a loader animation.
Creating an Animated Loader Icon
Loader icons can take any form—we’re really only limited by our imaginations. I’m going to show you two examples, which I hope will serve as inspiration for you to make your own ideas a reality.
Example 1
For our first example, I’ll start with the following <svg>:
<svg width="51px" height="50px" viewBox="0 0 51 50"> </svg>
Now let’s add three rectangles, which will ultimately change their height to suggest something is loading. Here’s the first:
<svg width="51px" height="50px" viewBox="0 0 51 50">
<rect y="0" width="13" height="50" fill="#1fa2ff">
<animate attributeName="height" values="50;10;50" begin="0s" dur="1s" repeatCount="indefinite" />
</rect>
</svg>And here are the second two along with it—you’ll notice they’re identical, but have different fill colors, are shifted over along the x axis, and have slightly delayed animations:
<svg width="51px" height="50px" viewBox="0 0 51 50">
<rect y="0" width="13" height="50" fill="#1fa2ff">
<animate attributeName="height" values="50;10;50" begin="0s" dur="1s" repeatCount="indefinite" />
</rect>
<rect x="19" y="0" width="13" height="50" fill="#12d8fa">
<animate attributeName="height" values="50;10;50" begin="0.2s" dur="1s" repeatCount="indefinite" />
</rect>
<rect x="38" y="0" width="13" height="50" fill="#06ffcb">
<animate attributeName="height" values="50;10;50" begin="0.4s" dur="1s" repeatCount="indefinite" />
</rect>
</svg>That gives us a pretty good loading animation! Let’s improve it slightly by also animating the y position of each rectangle. To do that we need to add three more <animate /> elements:
Example 2
This final example is a little more complex, because it involves creating the SVG in another program, then copying it over to a code editor, then animating its properties.
We’ll begin, however, on familiar territory, by hand coding an <svg>:
<svg width="50" height="50" viewBox="0 0 50 50"> </svg>
To our <svg> we add a <path> with some basic attributes:
<svg width="50" height="50" viewBox="0 0 50 50">
<path fill="#c779d0" d=""></path>
</svg>For the contents of our d (which defines how the path is drawn) we’re going to need a little help, so fire up Adobe Illustrator and start drawing (or just copy the code below, obviously..)
<svg width="50" height="50" viewBox="0 0 50 50">
<path fill="#c779d0" d="M25,5A20.14,20.14,0,0,1,45,22.88a2.51,2.51,0,0,0,2.49,2.26h0A2.52,2.52,0,0,0,50,22.33a25.14,25.14,0,0,0-50,0,2.52,2.52,0,0,0,2.5,2.81h0A2.51,2.51,0,0,0,5,22.88,20.14,20.14,0,0,1,25,5Z"></path>
</svg>Now let’s animate our <path> by rotating it, like we did in our earlier example. We add the following <animateTransform />.
<animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.5s" repeatCount="indefinite" />
That’s it! We now have a simple spinning loader animation. See what improvements you can make to it!
Conclusion
In this tutorial we started with the basics, learning to use the <animate /> element within a simple hand-coded SVG. We then built on that by introducing the <animateTransform /> element. Next, we took what we’d learned and created our own animated loader icon. Lastly, we created another, but by using the more complex <path> element which we generated with the help of Adobe Illustrator.
These steps should have given you a solid understanding of how SVG animation works. I look forward to seeing you in the next tutorial!
Useful Links
- SVG SMIL on caniuse.com
- SVG animation with SMIL by Mozilla
- SVG loaders by Sam Herbert
- SVG Loading icons on CodePen, by Aurer
