Javascript Circle Bar Animation

This is a little more dynamic, object-oriented version, so you can configure the options as the circle radius, border width, colors, duration and step of animation, you can also animate the circle to a certain percentage.

by Aqeel Malik

HTML

<canvas id="Circle" width="100" height="100"></canvas>

CSS

#Circle{border-radius: 100%;}

JavaScript

function Animation( opt ) {
        var context = opt.canvas.getContext("2d");
        var handle = 0;
        var current = 0;
        var percent = 0;

        this.start = function( percentage ) {
            percent = percentage;
            // start the interval
            handle = setInterval( draw, opt.interval );
        }

        // fill the background color
        context.fillStyle = opt.backcolor;
        context.fillRect( 0, 0, opt.width, opt.height );

        // draw a circle
        context.arc( opt.width / 2, opt.height / 2, opt.radius, 0, 2 * Math.PI, false );
        //context.lineWidth = opt.linewidth;
        //context.strokeStyle = opt.circlecolor;
        //context.stroke();

        function draw() {
            // make a circular clipping region
            context.beginPath();
            context.arc( opt.width / 2, opt.height / 2, opt.radius-(opt.linewidth/2), 0, 2 * Math.PI, false );
            //context.clip();

            // draw the current rectangle
            var height = ((100-current)*opt.radius*2)/100 + (opt.height-(opt.radius*2))/2;
            context.fillStyle = opt.fillcolor;
            context.fillRect( 0, height, opt.width, opt.radius*2 );

            // clear the interval when the animation is over
            if ( current < percent ) current+=opt.step;
            else clearInterval(handle);
        }
    }

    // create the new object, add options, and start the animation with desired percentage
    var canvas = document.getElementById("Circle");
    new Animation({
        'canvas': canvas,
        'width': canvas.width,
        'height': canvas.height,
        'radius': 100,
        //'linewidth': 10,        
        'interval': 20,
        'step': 1,
        'backcolor': '#666',
        //'circlecolor': '#fff',
        'fillcolor': '#339999'
    }).start( 70 );