Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. SVG
Webdesign

How to Create a Loader Icon With SVG Animation

by
Difficulty:BeginnerLength:ShortLanguages:

In this tutorial you’re going to learn how to make a very simple loader icon using SVG animation. What we’ll be covering is different from CSS animation—SVG animation resides 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.

We then place a rectangle, with some positioning values, dimensions, and a fill color, within it.

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.

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:

How about a third? Let’s change its fill color too.

Example 2

The second example will animate a transform attribute. We’ll start with the same <svg>, but with a slightly different <rect>:

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.

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:

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>:

Now let’s add three rectangles, which will ultimately change their height to suggest something is loading. Here’s the first:

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:

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>:

To our <svg> we add a <path> with some basic attributes:

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

Now let’s animate our <path> by rotating it, like we did in our earlier example. We add the following <animateTransform />

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 of SVG animation, 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

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.