View difference between Paste ID: ws4srSsB and c58fPwTL

 <!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;
-	            return setTimeout( function(){ _this.animate();
+	            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>