Click here to Skip to main content
12,942,930 members (59,956 online)
Click here to Skip to main content
Add your own
alternative version


12 bookmarked
Posted 17 May 2014

Animated Loading Image with SVG

, 17 May 2014 CPOL
Rate this:
Please Sign up or sign in to vote.
Create an animated SVG to use as a loading image.


For years, it has been standard practice to provide the user with an animated “loading” or “working” image whenever an application or program does something that takes more than a few milliseconds.

For example:



For us in the web environment, this practice presented a slight bit of a challenge because the only way we could do it was by making an animated GIF image. This can be very difficult if you’re a programmer and not a graphics designer. The task was also further complicated because our favorite graphics software (Photoshop) does not support the making of animated GIFs. In fact, finding the right GIF animator is a challenge all by itself. In addition to that, GIF supports a very limited number of colors so making a good looking loading image was mission impossible. Thankfully, the invention of HTML5 washed away all these worries.

HTML5 introduced a multitude of ways to present the user with an animated loading image without having to spend hours making tons of GIF images. In particular, HTML5 gave us the canvas and the SVG. After spending a few hours investigating the differences between an animated GIF, Canvas, and SVG, I decided to make a loading image that I can use across all my web pages as needed using SVG.


Between an animated GIF, Canvas, and SVG, the GIF has the worst performance. It requires the most CPU usage. In addition, you are limited by the colors and lack of decent software. The performance difference between Canvas and SVG is minimal. The Canvas, however, requires significantly more code to animate. For example, for each frame of the animation, the Canvas must be cleared, and then the whole image must be redrawn. On the other hand, the SVG simply requires the elements inside it to be altered as necessary for each frame. This can be done with much less code. Lastly, as we all know, SVG is scalable that means it is easy to take an existing animated SVG and make it larger or smaller for different applications. And that is why I chose the SVG.

The Loading Image

To make things simple, I first of all created my SVG image:

<svg id="loadingImg1" width="100" height="100">Loading...

  <circle cx="80" cy="50" r="5" fill="#000080"/>

  <circle cx="74" cy="32" r="5" fill="rgba(0,0,180,0.8)"/>

  <circle cx="59" cy="21" r="5" fill="rgba(0,0,180,0.6)"/>

  <circle cx="40" cy="21" r="5" fill="rgba(0,0,180,0.4)"/>

  <circle cx="26" cy="32" r="5" fill="rgba(0,0,180,0.2)"/>


By placing the elements of the image inside the markup instead of adding them dynamically, the speed of the code is improved and made more reusable.

Then to maintain reusability, I coded a wrapper for my SVG that will raise an event each time the next frame must be loaded.

//svg: the object reference to the svg element
//frames: the number of frames in the animated image
//delay: the time (in milliseconds) between each frame
function AnimatedImg(svg, frames, delay) {
    /****some code omitted for brevity****/

    //if onnextframe is assigned to a function it will be called periodically as determined by the frames variable
    this.onnextframe = null;

    //the elements of that make up the SVG
    this.elements = new Array(0);

    //currentFrame ranges from 1 to the number given by frames
    this.currentFrame = 1;

    this.isAnimated = function (){}
    this.startAnimation = function () {}
    this.stopAnimation = function () {}
//frames not given because AnimatedImg assigns default 10
//delay not given because AnimatedImg assigns default 100
var loadingImg1 = new AnimatedImg(document.getElementById("loadingImg1"));

For the full definition of AnimatedImg function, see the source code. As demonstrated in the source code, the AnimatedImg can be used to animate more than one SVG on a single page, and it can be used for any SVG regardless of the internal structure of the SVG. To use it in your own projects, download it via NuGet (the key is AnimatedImg).

The next step is to define the function where all the magic happens, and assign it the onnextframe event of the AnimatedImg. This function will then be called every 100 milliseconds. It uses the currentFrame property of the AnimatedImg to determine which frame to display and consequently where each element of the SVG must be.

loadingImg1.onnextframe = animateLoadingImg;
function animateLoadingImg(){
       for(var l_1 = 0;l_1<this.elements.length;l_1++)

function getX(radius,angle){
        return Math.cos(angle)*radius;
function getY(radius,angle){
        return Math.sin(angle)*radius;

The final step is to call the startAnimation method to animate the SVG and the stopAnimation method to stop the animation.

//start animation and display svg

//stop animation and hide svg


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

H Kruger
Software Developer
Namibia Namibia
My name is Heinrich Kruger and programming is my game. I have software running in my veins, and I dream of objects and classes at night. My three best friends are C#, Javascript, and PHP, but I have been seen in the company of SQL and Java. Bits and Bytes have asked to join my group but I told them only if they bring along their big brothers mega and giga. My life is not for everyone but it is great to be a code boss.

You may also be interested in...

Comments and Discussions

GeneralMy vote of 5 Pin
Carsten V2.017-May-14 22:14
memberCarsten V2.017-May-14 22:14 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170518.1 | Last Updated 17 May 2014
Article Copyright 2014 by H Kruger
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid