Journey of SVG -- (2) "Spinning Loader Icon"
Preface
"You had me at hello!" This is how SVG animating loaders make me feel, and actually we see them quite often no matter on websites or mobile apps, it enhances the UX which is like sending us the message that the page is in progress, and since I recognize myself as a well-mannered developer, I believe it's my duty to make a nice greeting for users.
Two Different Ways
In this case, I will build the spinning icon in 2 ways, the first one is in SMIL way, in which you will have to understand the purpose of the attribute of animation element, it might take a while if this is your first time to build things in SMIL; the second way will be doing with GreenSock JS Library, it is a powerful animation library, a great tool for someone who needs to build animation banner in their daily work, more importantly, the browser support of GreenSock is extraordinary, basicly you don't have to worry about IE anymore, I strongly recommend developers using this library for building animation.
1. CSS Animation
Using CSS keyframe will be a quick way to build a this spinning loader, but you have to be aware that the browser support of IE only versions above IE10.
First of all, we can create a circle spinning icon like below, you will nedd to get the code in illustrator.
*I've wrote a short tutorial about this before, you can check this here.
Then write a basic CSS keyframe setting, because we need the icon keep spinning smoothly, so we set the animation-iteration-count:infinite,andanimation-timing-function: linear as below.
@-webkit-keyframe spin {
from {
transform: rotate(0%)
}
to {
transform: rotate(360%)
}
}
@-moz-keyframe spin {
from {
transform: rotate(0%)
}
to {
transform: rotate(360%)
}
}
@-o-keyframe spin {
from {
transform: rotate(0%)
}
to {
transform: rotate(360%)
}
}
@keyframe spin {
from {
transform: rotate(0%)
}
to {
transform: rotate(360%)
}
}
.loader {
-webkit-animation-name: spin;
-moz-animation-name: spin;
-o-animation-name: spin;
animation-name: spin;
-webkit-animation-duration: 1.0s;
-moz-animation-duration: 1.0s;
-o-animation-duration: 1.0s;
animation-duration: 1.0s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
}
If you are writing in SCSS, even better. You can write up the mixin like below.
@mixin keyframes($animation-name) {
@-webkit-keyframes #{$animation-name} {
@content;
}
@-moz-keyframes #{$animation-name} {
@content;
}
@-ms-keyframes #{$animation-name} {
@content;
}
@-o-keyframes #{$animation-name} {
@content;
}
@keyframes #{$animation-name} {
@content;
}
}
@mixin animation($str) {
-webkit-animation: #{$str};
-moz-animation: #{$str};
-ms-animation: #{$str};
-o-animation: #{$str};
animation: #{$str};
}
//include the mixin above with animation name as parameter
@include keyframes(spinAnimation) {
from { rotate: 0deg; }
to { rotate: 360deg; }
}
.loader {
@include animation('spinAnimation 5s infinite linear');
}
2. GreenSock JS Library
Honestly, I didn't know GreenSock JS until recently, it's a powerful and easy-to-use library, helping developers to build web projects with fancy animation, since the support of webkit browser for SMIL is waning, and not even mention IE, GreenSock JS is probably the best tool to help you to build SVG animation.
(1) Initial Set up
Before building this demo, we should include the JS library, you can download it to your local site, or just use the CDN link.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
(2) Include SVG
Creating the SVG, you can check my previous article about it, include it in you html file.
(3) Add the id, Grouping the SVG shapes
To target the SVG element by setting individual id as #Spin, and I also found there some path elements show up in the code created by illustrator which I actually don't need, if this happen to you also, just deleting all of those like I did.
The final code would be look like below.
<svg stroke="#fff" width="200" height="200" viewbox="0,0,200,200">
// the circle part of this icon
<circle stroke-opacity=".5" cx="100" cy="100" r="18"/>
//the piece of circle, which we control it to do spinning animation
<path id="Spin" d="M118 100c0-9.94-8.06-18-18-18"></path>
</svg>
(4) Set up the JS code.
Before using the GreenSock library, I suggest you should take a look their document, it might take a while, but it's not complicated, you can also follow this tutorial video on ihatetomato.com, once you finish it, you are good to go!
Now we should create a timeline for our SVG element, and set the property repeat as -1, this means the animation will repeat infinitely.
We also have to pay attention to the transformOrigin attribute, because the default value is center center, if we don't do anything, then it will rotate like this.
Therefore, we should set the value of transformOrigin as transformOrigin:"left bottom",
then the path will rotate base on the red dot.
The JS code will look like this.
var tl = new TimelineMax({repeat:-1});
tl
.to("#Spin", 2, {rotation:360, transformOrigin:"left bottom",ease: Power0.easeNone});
Final SVG Spinning Animation
Conclusion
Actually we can also make this animation by SMIL, but since the browser support of webkit is waning, not to mention IE, I strongly recommend using GreenSock JS to make SVG animation, because [the widest browser support ](https://css-tricks.com/smil-is-dead-long-live-smil-a-guide-to-alternatives-to-smil-features/#article-header-id-2, you don't have to worry about the performance on different browser.
As simple as it is, I hope you all enjoy making your own SVG spinning icon. Cheers!
Reference:
1 SMIL is dead! Long live SMIL! A Guide to Alternatives to SMIL Features
2.How To Animate SVG With GreenSock
3.Keyframe Animations in Sass
4.8 Sass mixins you must have in your toolbox