There 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.
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:
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:
Discrete or continuous animation
The movement of rotating segment can be controlled by changing
The speed of the animation is also easily changed by editing
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.
And for the rotating segment, change the same attribute in