HTML JavaScript Metro style progress ring (in the making)

<!DOCTYPE html>
<html>
<head>
    <title>Metro progress ring</title>
    <script type="text/javascript" src="metro.js"></script>
    <style type="text/css">
    .circle {
        height: 4px;
        width: 4px;
        list-style: disc;
        list-style-position: inside;
    }
    </style>
</head>
<body>

    <script type="text/javascript">
    (function (window, document, lib, undefined) {
        "use strict";
        if (lib == undefined || !lib instanceof Assembly) throw "LoadingBar must be part of an assembly.";

        lib.ProgressRing = function (args /* { element : document element, numCircles : integer } */) {
            var args = args == undefined ? { numCircles: this.numCircles, element: document.createElement('ul')} : args;
            this.numCircles = args.numCircles == undefined ? this.numCircles : typeof args.numCircles == 'number' ? args.numCircles : this.numCircles;
            this.element = args.element == undefined ? document.createElement('ul') : args.element;
            this.element.className = 'progress-circle';
            this.element.style.overflow = 'hidden';
            this.setDimensions();
            var _this = this;
            window.addEventListener('resize', function () { _this.setDimensions() });
            return this;
        }
        lib.ProgressRing.prototype = {

            constructor: lib.ProgressRing,
            interval: null,
            element: null,
            numCircles: 5,
            animationSpeed: 20,
            circleDisplacemenetSpeed: Math.PI,
            speedUpPercentage: 0,
            dimensions: new lib.Vector2(),
            speedUpRange: [new lib.Vector2(256,256), new lib.Vector2(256,128)],
            loops : 0,
            pause : 0,

            setDimensions: function () {
                this.element.style.width = 256 + 'px';
                this.element.style.height = 256 + 'px';
                this.dimensions = new lib.Vector2(parseInt(this.element.style.width), parseInt(this.element.style.height));
                this.midPoint = this.dimensions.clone().half();
            },

            circles : [],

            addCirlce: function () {
                var circle = {};
                circle.element = document.createElement('li');
                circle.element.className = 'circle';
                circle.element.style.position = 'fixed';
                //circle.element.style.display = 'block';
                circle.angle = 0;
                this.element.appendChild(circle.element);
                this.circles.push(circle);
                return circle;
            },

            removeCirlce: function (index) {
                this.element.removeChild(this.circles[index].element);
                this.circles.pop(this.circles[index])
            },

            clearCircles: function () {
                while (this.element.hasChildNodes()) {
                    this.element.removeChild(this.element.lastChild);
                }
            },

            start: function () {
                this.stop();
                this.loops = 0;
                for (var i = 0; i < this.numCircles; i++)
                {
                    var circle = this.addCirlce()
                    circle.angle = ( (360/this.numCircles)*i);

                    var left = this.midPoint.x + Math.cos( circle.angle * Math.PI / 180 ) * this.midPoint.x;
                    var top = this.midPoint.y + Math.sin( circle.angle * Math.PI / 180 ) * this.midPoint.y;

                    circle.element.style.left = Math.floor(left) + 'px';
                    circle.element.style.top = Math.floor(top) + 'px';
                }
                this.speedUpPercentage = this.circles.length * 50;

                var _this = this;
                setTimeout( function(){ _this.animate() }, this.pause );
                this.pause = 1000;
            },
            animate: function () {

                if( this.circles.length == 0 ) return this.start();

                for (var i in this.circles)
                {
                    if (typeof this.circles[i] == 'object')
                    {
                        var position = new lib.Vector2(parseInt(this.circles[i].element.style.left),parseInt(this.circles[i].element.style.top));
                        if( position.isBetween(this.speedUpRange[0],this.speedUpRange[1]))
                        {
                            this.circles[i].angle += (this.circleDisplacemenetSpeed * (this.speedUpPercentage/100));
                        }
                        else
                        {
                            this.circles[i].angle += this.circleDisplacemenetSpeed;
                        }

                        //if(i == 0 ) console.log(Math.cos( this.circles[i].angle * Math.PI / 360 )*Math.sin( this.circles[i].angle * Math.PI / 360 ))

                        var x = this.midPoint.x + Math.cos( this.circles[i].angle * Math.PI / 360 ) * this.midPoint.x;
                        var y = this.midPoint.y + Math.sin( this.circles[i].angle * Math.PI / 360 ) * this.midPoint.y;

                        this.circles[i].element.style.left = Math.floor(x) + 'px';
                        this.circles[i].element.style.top = Math.floor(y) + 'px';

                        if( position.isBetween(this.speedUpRange[0],this.speedUpRange[1]) && this.loops > 450 )
                        {
                            this.removeCirlce(i);
                        }
                    }
                }
                var _this = this;
                this.loops++;
                //console.log(this.loops)
                this.interval = setTimeout(function () { _this.animate(); }, _this.animationSpeed);
            },
            reset: function () {
                this.clearCircles();
                clearTimeout(this.interval);
            },
            stop: function () {
                this.loops = 0;
                this.clearCircles();
                clearTimeout(this.interval);
            }
        }
    })(window, document, Metro)

    var lol = new Metro.ProgressRing();
    document.body.appendChild( lol.element );
    lol.start();
    </script>

</body>
</html>