Jorge C. S. Cardoso, DEI, Faculdade de Ciências e Tecnologia, Universidade de Coimbra Rua Sílvio Lima, Univ.
Coimbra - Pólo II, 3030-790 Coimbra Portugal
Scalable Ajax Loading Indicator in SVG
07 Oct 2012There are plenty of sites to generate animated GIFs to use in AJAX loading processes, for example ajaxload.info, or preloaders.net. These sites allow you generate a plethora of different loading graphics with different color and sizes. However, they generated graphics with a very limited maximum size, which makes the useless if you want a preloader graphic for use in a large public display application.
SVG Loader
Ideally, these sites would generate scalable graphics in SVG, but I could not find any that did this. So I had to come up with my own loading graphics in SVG. Its actually not very difficult to produce an animation like most loaders use, in SVG. Here’s the complete source code for my loader SVG:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1"
viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!--
Preloader scalable graphics
author: Jorge C. S. Cardoso
date: 2012 Oct 07
-->
<g>
<defs>
<clipPath id="clip">
<path d="M 50 50 L 35 0 L 65 0 z" />
</clipPath>
<ellipse id= "MyEllipse" clip-path="url(#clip)"
cx="50" cy="50" rx="40" ry="40"
style="fill:none; stroke:#aaa" stroke-width="10" />
</defs>
<use xlink:href="#MyEllipse" />
<use xlink:href="#MyEllipse" transform="rotate(40 50 50)" />
<use xlink:href="#MyEllipse" transform="rotate(80 50 50)" />
<use xlink:href="#MyEllipse" transform="rotate(120 50 50)"/>
<use xlink:href="#MyEllipse" transform="rotate(160 50 50)"/>
<use xlink:href="#MyEllipse" transform="rotate(200 50 50)"/>
<use xlink:href="#MyEllipse" transform="rotate(240 50 50)"/>
<use xlink:href="#MyEllipse" transform="rotate(280 50 50)"/>
<use xlink:href="#MyEllipse" transform="rotate(320 50 50)"/>
<ellipse clip-path="url(#clip)"
cx="50" cy="50" rx="40" ry="40"
style="fill:none; stroke:black" stroke-width="12" >
<animateTransform attributeName="transform" attributeType="XML"
type="rotate" values="0 50 50; 40 50 50; 80 50 50; 120 50 50;
160 50 50; 200 50 50; 240 50 50; 280 50 50; 320 50 50; 360 50 50"
dur="2s"
repeatCount="indefinite"
additive="replace"
calcMode="discrete" fill="freeze"/>
</ellipse>
</g>
</svg>This SVG results in the following animation, which scales to any dimension without quality loss (try clicking on the image):
Obviously, this produces a limited type of animation, but it can still be modified in a number of ways by editing small parts of the SVG.
Width of rotating segment
The width of the rotating segment can be controlled by changing the “stroke-width” value in this line:
<ellipse clip-path="url(#clip)"
cx="50" cy="50" rx="40" ry="40"
style="fill:none; stroke:black" stroke-width="12" >
Discrete or continuous animation
The movement of rotating segment can be controlled by changing
calcMode="discrete"
Speed
The speed of the animation is also easily changed by editing
dur="2s"
Colors
Both the background circle and the rotating segment’s colors can also be adjusted easily For the background, just change the “stroke:#aaa” to another web color.
<ellipse id= "MyEllipse" clip-path="url(#clip)"
cx="50" cy="50" rx="40" ry="40"
style="fill:none; stroke:#aaa" stroke-width="10" />And for the rotating segment, change the same attribute in
<ellipse clip-path="url(#clip)"
cx="50" cy="50" rx="40" ry="40"
style="fill:none; stroke:black" stroke-width="12" >
