Animated SVG loading Icon
Animated SVG elements are nothing to be intimidated by. In this write-up and demo we'll learn how to create a smoothly animated SVG icon using widely supported HTML, CSS and JavaScript. See the stand-alone demo here.
First, some basics. SVG, first defined in 1999, stands for scalable vector graphics and is based on mathematical points, rather than pixel units. The main benefits of SVG are scalability and increased independence from rasterized image files (for example: .gif, .png, .jpg files).
Now for the code for creating the animated SVG icon (see the stand-alone demo here).
The HTML and CSS are fairly simple, listed below in Figure 2. Notice the svg and path elements in the HTML are based on XML syntax. The svg element sets the bounds of the element and the path is a line composed of points. The "d" attribute of the path element stands for "description". The "M", for "move to", in the value of d represents the x and y coordinates where the path will begin. The CSS sets the size of a div containing the svg, and rotates that div continuously around its center in 2 second periods.
The JavaScript, listed below in Figure 3, controls the animated length of the path element. As shown in Figure 1 above, the path is actually composed of many 5 degree arcs arranged adjacent to one another. The arcs, or radians, listed in the "d" attribute of the path element are converted to an array. This is done to more easily add and remove radians from the path.
That's it! I hope you enjoyed this write-up, and please share it if you found it useful.
<style>
#container {
width:200px;
height:200px;
-webkit-animation:spin 2s infinite;
-moz-animation:spin 2s infinite;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
@-moz-keyframes spin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
@-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
</style>
<div id="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
viewBox="0 0 200 200"
id="loader"
onload="drawCircle();">
<path d="M0,0 " id="arc" fill="none" stroke="#f75" stroke-width="20" />
</svg>
</div>
<script>
function drawCircle() {
"use strict";
var i = 0,
angle = 0,
radius = 75,
shrink = false,
updatedDescriptionArray = [],
pathElement = document.getElementById("arc");
window.timer = window.setInterval(
function() {
// Shrink the arc when it reaches 360 degrees in length, otherwise grow the arc when it shrinks to 5 degrees.
if (angle > 0 && angle%360===0) {
shrink = true;
}
else if (angle === 5) {
shrink = false;
}
if (shrink === true) {
angle -= 5;
}
else {
angle += 5;
}
// Calculate the coordinates of the radian we are going to add next
var radian = (angle/180) * Math.PI;
var x = 100 + Math.cos(radian) * radius;
var y = 100 + Math.sin(radian) * radius;
// Set pathDescription equal to the 'd' (description) attribute of the element
var pathDescription = pathElement.getAttribute("d");
var descriptionString,
newMoveTo;
if (i == 0) {
// Starting coordinates for the path on initial page load
updatedDescriptionArray.push(" M " + x + " " + y);
}
else {
if (shrink === false) {
// Grow the path: add line-to point for each radian
updatedDescriptionArray.push(" L " + x + " " + y);
}
else {
// Shrink the path: define a new point for move-to based on the second line-to point
newMoveTo = updatedDescriptionArray[1].replace("L","M");
// Remove the first radian
updatedDescriptionArray.splice(1,1);
// Update the starting point of the path
updatedDescriptionArray.splice(0, 1, newMoveTo);
}
}
var descriptionString = updatedDescriptionArray.join(" ");
// Update the description attribute of the path
pathElement.setAttribute("d", descriptionString);
i++;
}, 25);
}
</script>
