diff --git a/NewLayout.html b/NewLayout.html
index f33298b55..e3a201542 100644
--- a/NewLayout.html
+++ b/NewLayout.html
@@ -3,8 +3,9 @@
 	<head>
 		<title>Bloodhound</title>
 		<link rel="icon" href="img/favicon.ico">
-		<script src="js/jquery-2.2.1.min.js"></script>
-		<script src="js/jquery-ui.min.js"></script>
+		<script type="text/javascript" src="js/jquery-2.2.1.min.js"></script>
+		<script type="text/javascript" src="js/jquery-ui.min.js"></script>
+		<script type="text/javascript" src="js/circle-progress/circle-progress.js"></script>
 		<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
 		<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
 		<link type="text/css" rel="stylesheet" href="css/bootstrap-theme.min.css">
@@ -325,7 +326,7 @@ <h3 align='center'>{{label}} Properties</h2>
 				<dt>Group Delegated Local Admin Rights</dt>
 				<dd><a href="#" onclick="doQuery('MATCH (n:User {name:&quot;{{label}}&quot;}), (m:Computer), (o:Group), (n)-[r:MemberOf]->(o)-[s:AdminTo]->(m) RETURN n,r,o,s,m', &quot;{{label}}&quot;, &quot;&quot;)">{{dlar}}</a></dd>
 				<dt>Derivative Local Admin Rights</dt>
-				<dd><a href="#" onclick="doQuery('MATCH (n:User {name:&quot;{{label}}&quot;}), (m:Computer), p=allShortestPaths((n)-[r*1..]->(m)) RETURN p', &quot;{{label}}&quot;)">{{derivative}}</a></dd>
+				<dd><a href="#" onclick="doQuery('MATCH (n:User {name:&quot;{{label}}&quot;}), (m:Computer), p=allShortestPaths((n)-[r*]->(m)) RETURN p', &quot;{{label}}&quot;)">{{derivative}}</a></dd>
 				<dt>Sessions</dt>
 				<dd><a href="#" onclick="doQuery('MATCH (n:Computer)-[r:HasSession]->(m:User {name:&quot;{{label}}&quot;}) RETURN n,r,m')">{{sessions}}</a></dd>
 			</dl>
@@ -750,12 +751,16 @@ <h4 class="modal-title" id="deleteDBLabel">Clearing Database</h4>
 						</tr>
 					</thead>
 					<tbody id="nodeBody" class="searchable">
-						<tr><td>Herman</td><td>Astra</td></tr><tr><td>Ira</td><td>Cara</td></tr><tr><td>Kasper</td><td>Olivia</td></tr><tr><td>Kaseem</td><td>Nita</td></tr><tr><td>Malcolm</td><td>Chava</td></tr><tr><td>Paki</td><td>Julie</td></tr><tr><td>Vladimir</td><td>Zorita</td></tr><tr><td>Price</td><td>Chava</td></tr><tr><td>Mason</td><td>Aphrodite</td></tr><tr><td>Alvin</td><td>Ulla</td></tr><tr><td>Baxter</td><td>Mara</td></tr><tr><td>Tobias</td><td>Willa</td></tr><tr><td>Samson</td><td>Bertha</td></tr><tr><td>Lars</td><td>Jaden</td></tr><tr><td>Emerson</td><td>Yael</td></tr><tr><td>Jarrod</td><td>Riley</td></tr><tr><td>Paul</td><td>Donna</td></tr><tr><td>Brian</td><td>Noelani</td></tr><tr><td>Lawrence</td><td>Indigo</td></tr><tr><td>Akeem</td><td>Charity</td></tr><tr><td>Lionel</td><td>Roanna</td></tr><tr><td>Rooney</td><td>Dorothy</td></tr><tr><td>Alexander</td><td>Colette</td></tr><tr><td>Cameron</td><td>Madaline</td></tr><tr><td>Lionel</td><td>Carissa</td></tr><tr><td>Charles</td><td>Uma</td></tr><tr><td>Deacon</td><td>Imogene</td></tr><tr><td>Alden</td><td>Audra</td></tr><tr><td>Brian</td><td>Kiara</td></tr><tr><td>Isaiah</td><td>Jessamine</td></tr><tr><td>Castor</td><td>Sade</td></tr><tr><td>Eric</td><td>Kameko</td></tr><tr><td>Owen</td><td>Jacqueline</td></tr><tr><td>Duncan</td><td>Audra</td></tr><tr><td>Kane</td><td>Madison</td></tr><tr><td>Salvador</td><td>Zena</td></tr><tr><td>Lev</td><td>Stacy</td></tr><tr><td>Craig</td><td>Yetta</td></tr><tr><td>Stewart</td><td>Violet</td></tr><tr><td>Aquila</td><td>Sylvia</td></tr><tr><td>John</td><td>Fleur</td></tr><tr><td>Gabriel</td><td>Cleo</td></tr><tr><td>Caesar</td><td>Kyra</td></tr><tr><td>Beau</td><td>Kai</td></tr><tr><td>Vincent</td><td>Zephr</td></tr><tr><td>Dylan</td><td>Molly</td></tr><tr><td>Upton</td><td>Unity</td></tr><tr><td>Jelani</td><td>Vivien</td></tr><tr><td>Noble</td><td>Carolyn</td></tr><tr><td>Tad</td><td>Ciara</td></tr><tr><td>Hop</td><td>Aiko</td></tr><tr><td>Sean</td><td>Phoebe</td></tr><tr><td>Beau</td><td>Shana</td></tr><tr><td>Phillip</td><td>Medge</td></tr><tr><td>Wade</td><td>Amelia</td></tr><tr><td>Troy</td><td>Jessica</td></tr><tr><td>Kasper</td><td>Alana</td></tr><tr><td>Kato</td><td>Ursula</td></tr><tr><td>Wallace</td><td>Darrel</td></tr><tr><td>Merrill</td><td>Jenna</td></tr><tr><td>Uriah</td><td>Sylvia</td></tr><tr><td>Channing</td><td>Isabella</td></tr><tr><td>Berk</td><td>Rose</td></tr><tr><td>Keaton</td><td>Montana</td></tr><tr><td>Forrest</td><td>Wanda</td></tr><tr><td>Ezekiel</td><td>Xandra</td></tr><tr><td>Malachi</td><td>Ursula</td></tr><tr><td>Nasim</td><td>Brenna</td></tr><tr><td>Colorado</td><td>Demetria</td></tr><tr><td>Emery</td><td>Olympia</td></tr><tr><td>Drew</td><td>Uma</td></tr><tr><td>Xenos</td><td>Isadora</td></tr><tr><td>Conan</td><td>Dawn</td></tr><tr><td>Barry</td><td>Macy</td></tr><tr><td>Kyle</td><td>Noelle</td></tr><tr><td>Robert</td><td>Galena</td></tr><tr><td>Mohammad</td><td>Claire</td></tr><tr><td>Ulric</td><td>Adele</td></tr><tr><td>Joseph</td><td>Brenda</td></tr><tr><td>Levi</td><td>Charity</td></tr><tr><td>Fitzgerald</td><td>Zephr</td></tr><tr><td>Gavin</td><td>Mia</td></tr><tr><td>Rigel</td><td>Jolie</td></tr><tr><td>Hayden</td><td>Quail</td></tr><tr><td>Cruz</td><td>Olivia</td></tr><tr><td>Aquila</td><td>Melinda</td></tr><tr><td>Daniel</td><td>Macey</td></tr><tr><td>Lyle</td><td>Rachel</td></tr><tr><td>Xander</td><td>Rosalyn</td></tr><tr><td>Travis</td><td>Naomi</td></tr><tr><td>Jin</td><td>Rina</td></tr><tr><td>Leo</td><td>Tallulah</td></tr><tr><td>Henry</td><td>Aspen</td></tr><tr><td>Chase</td><td>Kelly</td></tr><tr><td>Knox</td><td>Odette</td></tr><tr><td>Omar</td><td>Noel</td></tr><tr><td>Gage</td><td>Illiana</td></tr><tr><td>Melvin</td><td>Rebekah</td></tr><tr><td>Warren</td><td>Basia</td></tr><tr><td>Plato</td><td>Lana</td></tr>
 					</tbody>
 				</table>
 			</div>
 		</div>
 
+		<div id="queryLoad" class="loadingIndicator">
+			<div id="loadingText">Loading</div>
+			<div id="circle"></div>
+		</div>
+
 		<!-- <div id="settingsDiv" class="settingsDiv panel panel-default">
 			<div class="panel-heading">
 				Settings
diff --git a/css/styles.css b/css/styles.css
index ff22a926d..1d3cef31b 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -82,7 +82,7 @@ html, body{
 		z-index: 10;
 		position: absolute;
 		overflow: visible;
-		width: 35%;
+		width: 33%;
 		top: 1em;
 		left: 1em;
 		background-color: white;
@@ -443,4 +443,16 @@ html, body{
 .nav-tabs li{
 	white-space:nowrap;
 	overflow:hidden;
+}
+
+.loadingIndicator{
+	z-index: 25;
+	bottom: .5em;
+	left: 1em;
+	width: 80px;
+	position: absolute;
+}
+
+.loadingIndicator div:first-child{
+	text-align: center;
 }
\ No newline at end of file
diff --git a/css/tooltip.css b/css/tooltip.css
index 87abc1154..fbe4fe48a 100644
--- a/css/tooltip.css
+++ b/css/tooltip.css
@@ -74,6 +74,7 @@
 }
 
 .new-tooltip {
+  z-index: 29;
   max-height: 400px;
   display: inline-block;
   background-color: rgba(255, 255, 255, .95);
diff --git a/js/bloodhound.js b/js/bloodhound.js
index c0fd68542..7e4b5fce8 100644
--- a/js/bloodhound.js
+++ b/js/bloodhound.js
@@ -3,6 +3,18 @@ $(document).ready(function(){
 	$('#checkconnectionpanel').fadeToggle(0)
 	$('#logoutpanel').fadeToggle(0)
 	$('#spotlight').fadeToggle(0);
+	$('#queryLoad').fadeToggle(0);
+
+	$('#circle').circleProgress({
+	    value: 0,
+	    size: 80,
+	    fill: {
+	    	gradient: ["red","black"]
+	    },
+	    startAngle: -1.57
+	}).on('circle-animation-progress', function(event, progress) {
+	    $(this).find('strong').html(parseInt(100 * progress) + '<i>%</i>');
+	});
 
 	// Set our default renderer to Canvas, since a lot of plugins dont work on WebGL
 	sigma.renderers.def = sigma.renderers.canvas
@@ -145,10 +157,21 @@ $(document).ready(function(){
 	// Initialize the noverlap plugin
 	noverlapListener = sigmaInstance.configNoverlap({nodeMargin: 2.0, easing: 'cubicInOut', gridSize: 50})
 	noverlapListener.bind('stop', function(event){
-		if (noanimate){
-			sigmaInstance.settings('animationsTime', 200);
-			noanimate = false;
+		$('#loadingText').text('Complete')
+		$('#circle').circleProgress({
+			animationStartValue: .75,
+			value: 1
+		})
+		if ($('#queryLoad').is(":visible")){
+			setTimeout(function(){
+				$('#queryLoad').fadeToggle()
+			}, 2000)
+			if (noanimate){
+				sigmaInstance.settings('animationsTime', 200);
+				noanimate = false;
+			}
 		}
+		
 	})
 
 	// Initialize the tooltips plugin
@@ -231,6 +254,11 @@ $(document).ready(function(){
 	// Set Noverlap to run when forcelink is run
 	fa.bind('stop', function(event){
 		if (event.type == 'stop'){
+			$('#loadingText').text('Fixing Overlap')
+			$('#circle').circleProgress({
+				animationStartValue: .50,
+				value: .75
+			})
 			sigmaInstance.startNoverlap()
 		}
 	})
@@ -245,6 +273,11 @@ $(document).ready(function(){
 	// Set Noverlap to run when dagre layout is finished
 	listener.bind('stop', function(event) {
 	  if (event.type == 'stop'){
+	  	$('#loadingText').text('Fixing Overlap')
+		$('#circle').circleProgress({
+			animationStartValue: .50,
+			value: .75
+		})
 	  	sigmaInstance.startNoverlap()
 	  }
 	});
@@ -963,6 +996,15 @@ function doQuery(query, start, end, preventCollapse){
 	if (currentTooltip != null){
 		currentTooltip.close();	
 	}
+
+	$('#loadingText').text('Querying Database')
+	$('#circle').circleProgress({
+		value: 0
+	})
+	if ($('#queryLoad').is(":hidden")){
+		$('#queryLoad').fadeToggle()	
+	}
+	
 	
 	design.deprecate()
 
@@ -980,6 +1022,10 @@ function doQuery(query, start, end, preventCollapse){
 				redoLast()
 				$("#nodataalert").delay(3000).fadeToggle(false)
 			}else{
+				$('#loadingText').text('Processing Nodes')
+				$('#circle').circleProgress({
+					value: .25
+				})
 				$.each(sigmaInstance.graph.nodes(), function(index, node){
 					node.degree = sigmaInstance.graph.degree(node.id)
 				})
@@ -1022,7 +1068,7 @@ function doQuery(query, start, end, preventCollapse){
 				updateSpotlight()
 				sigmaInstance.refresh();
 				design.apply()
-				sigma.misc.animation.camera(sigmaInstance.camera, { x:0, y:0, ratio: 1 });
+				sigma.misc.animation.camera(sigmaInstance.camera, { x:0, y:0, ratio: 1.075 });
 				if (!(startNode === null)){
 					startNode.glyphs = [{
 						'position':'bottom-right',
@@ -1058,6 +1104,11 @@ function doQuery(query, start, end, preventCollapse){
 					}
 					endNode.size = endNode.size + 5
 				}
+				$('#loadingText').text('Initial Layout')
+				$('#circle').circleProgress({
+					animationStartValue: .25,
+					value: .50
+				})
 				if (usedagre){
 					sigma.layouts.dagre.start(sigmaInstance);
 				}else{
@@ -1245,6 +1296,14 @@ function updateNodeData(node){
 }
 
 function forceRelayout(){
+	if ($('#queryLoad').is(":hidden")){
+		$('#queryLoad').fadeToggle()
+	}
+	$('#loadingText').text('Initial Layout')
+	$('#circle').circleProgress({
+		animationStartValue: .50,
+		value: .75
+	})
 	sigma.layouts.stopForceLink();
 	if (usedagre){
 		sigma.layouts.dagre.start(sigmaInstance);
diff --git a/js/circle-progress/LICENSE b/js/circle-progress/LICENSE
new file mode 100644
index 000000000..f72fe672c
--- /dev/null
+++ b/js/circle-progress/LICENSE
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 Rostyslav Bryzgunov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/js/circle-progress/circle-progress.js b/js/circle-progress/circle-progress.js
new file mode 100644
index 000000000..632ecb668
--- /dev/null
+++ b/js/circle-progress/circle-progress.js
@@ -0,0 +1,439 @@
+/*
+jquery-circle-progress - jQuery Plugin to draw animated circular progress bars
+
+URL: http://kottenator.github.io/jquery-circle-progress/
+Author: Rostyslav Bryzgunov <kottenator@gmail.com>
+Version: 1.1.3
+License: MIT
+*/
+(function($) {
+    function CircleProgress(config) {
+        this.init(config);
+    }
+
+    CircleProgress.prototype = {
+        //----------------------------------------------- public options -----------------------------------------------
+        /**
+         * This is the only required option. It should be from 0.0 to 1.0
+         * @type {number}
+         */
+        value: 0.0,
+
+        /**
+         * Size of the circle / canvas in pixels
+         * @type {number}
+         */
+        size: 100.0,
+
+        /**
+         * Initial angle for 0.0 value in radians
+         * @type {number}
+         */
+        startAngle: -Math.PI,
+
+        /**
+         * Width of the arc. By default it's auto-calculated as 1/14 of size, but you may set it explicitly in pixels
+         * @type {number|string}
+         */
+        thickness: 'auto',
+
+        /**
+         * Fill of the arc. You may set it to:
+         *   - solid color:
+         *     - { color: '#3aeabb' }
+         *     - { color: 'rgba(255, 255, 255, .3)' }
+         *   - linear gradient (left to right):
+         *     - { gradient: ['#3aeabb', '#fdd250'], gradientAngle: Math.PI / 4 }
+         *     - { gradient: ['red', 'green', 'blue'], gradientDirection: [x0, y0, x1, y1] }
+         *   - image:
+         *     - { image: 'http://i.imgur.com/pT0i89v.png' }
+         *     - { image: imageObject }
+         *     - { color: 'lime', image: 'http://i.imgur.com/pT0i89v.png' } - color displayed until the image is loaded
+         */
+        fill: {
+            gradient: ['#3aeabb', '#fdd250']
+        },
+
+        /**
+         * Color of the "empty" arc. Only a color fill supported by now
+         * @type {string}
+         */
+        emptyFill: 'rgba(0, 0, 0, .1)',
+
+        /**
+         * Animation config (see jQuery animations: http://api.jquery.com/animate/)
+         */
+        animation: {
+            duration: 1200,
+            easing: 'circleProgressEasing'
+        },
+
+        /**
+         * Default animation starts at 0.0 and ends at specified `value`. Let's call this direct animation.
+         * If you want to make reversed animation then you should set `animationStartValue` to 1.0.
+         * Also you may specify any other value from 0.0 to 1.0
+         * @type {number}
+         */
+        animationStartValue: 0.0,
+
+        /**
+         * Reverse animation and arc draw
+         * @type {boolean}
+         */
+        reverse: false,
+
+        /**
+         * Arc line cap ('butt', 'round' or 'square')
+         * Read more: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D.lineCap
+         * @type {string}
+         */
+        lineCap: 'butt',
+
+        //-------------------------------------- protected properties and methods --------------------------------------
+        /**
+         * @protected
+         */
+        constructor: CircleProgress,
+
+        /**
+         * Container element. Should be passed into constructor config
+         * @protected
+         * @type {jQuery}
+         */
+        el: null,
+
+        /**
+         * Canvas element. Automatically generated and prepended to the {@link CircleProgress.el container}
+         * @protected
+         * @type {HTMLCanvasElement}
+         */
+        canvas: null,
+
+        /**
+         * 2D-context of the {@link CircleProgress.canvas canvas}
+         * @protected
+         * @type {CanvasRenderingContext2D}
+         */
+        ctx: null,
+
+        /**
+         * Radius of the outer circle. Automatically calculated as {@link CircleProgress.size} / 2
+         * @protected
+         * @type {number}
+         */
+        radius: 0.0,
+
+        /**
+         * Fill of the main arc. Automatically calculated, depending on {@link CircleProgress.fill} option
+         * @protected
+         * @type {string|CanvasGradient|CanvasPattern}
+         */
+        arcFill: null,
+
+        /**
+         * Last rendered frame value
+         * @protected
+         * @type {number}
+         */
+        lastFrameValue: 0.0,
+
+        /**
+         * Init/re-init the widget
+         * @param {object} config - Config
+         */
+        init: function(config) {
+            $.extend(this, config);
+            this.radius = this.size / 2;
+            this.initWidget();
+            this.initFill();
+            this.draw();
+        },
+
+        /**
+         * @protected
+         */
+        initWidget: function() {
+            var canvas = this.canvas = this.canvas || $('<canvas>').prependTo(this.el)[0];
+            canvas.width = this.size;
+            canvas.height = this.size;
+            this.ctx = canvas.getContext('2d');
+        },
+
+        /**
+         * This method sets {@link CircleProgress.arcFill}
+         * It could do this async (on image load)
+         * @protected
+         */
+        initFill: function() {
+            var self = this,
+                fill = this.fill,
+                ctx = this.ctx,
+                size = this.size;
+
+            if (!fill)
+                throw Error("The fill is not specified!");
+
+            if (fill.color)
+                this.arcFill = fill.color;
+
+            if (fill.gradient) {
+                var gr = fill.gradient;
+
+                if (gr.length == 1) {
+                    this.arcFill = gr[0];
+                } else if (gr.length > 1) {
+                    var ga = fill.gradientAngle || 0, // gradient direction angle; 0 by default
+                        gd = fill.gradientDirection || [
+                            size / 2 * (1 - Math.cos(ga)), // x0
+                            size / 2 * (1 + Math.sin(ga)), // y0
+                            size / 2 * (1 + Math.cos(ga)), // x1
+                            size / 2 * (1 - Math.sin(ga))  // y1
+                        ];
+
+                    var lg = ctx.createLinearGradient.apply(ctx, gd);
+
+                    for (var i = 0; i < gr.length; i++) {
+                        var color = gr[i],
+                            pos = i / (gr.length - 1);
+
+                        if ($.isArray(color)) {
+                            pos = color[1];
+                            color = color[0];
+                        }
+
+                        lg.addColorStop(pos, color);
+                    }
+
+                    this.arcFill = lg;
+                }
+            }
+
+            if (fill.image) {
+                var img;
+
+                if (fill.image instanceof Image) {
+                    img = fill.image;
+                } else {
+                    img = new Image();
+                    img.src = fill.image;
+                }
+
+                if (img.complete)
+                    setImageFill();
+                else
+                    img.onload = setImageFill;
+            }
+
+            function setImageFill() {
+                var bg = $('<canvas>')[0];
+                bg.width = self.size;
+                bg.height = self.size;
+                bg.getContext('2d').drawImage(img, 0, 0, size, size);
+                self.arcFill = self.ctx.createPattern(bg, 'no-repeat');
+                self.drawFrame(self.lastFrameValue);
+            }
+        },
+
+        draw: function() {
+            if (this.animation)
+                this.drawAnimated(this.value);
+            else
+                this.drawFrame(this.value);
+        },
+
+        /**
+         * @protected
+         * @param {number} v - Frame value
+         */
+        drawFrame: function(v) {
+            this.lastFrameValue = v;
+            this.ctx.clearRect(0, 0, this.size, this.size);
+            this.drawEmptyArc(v);
+            this.drawArc(v);
+        },
+
+        /**
+         * @protected
+         * @param {number} v - Frame value
+         */
+        drawArc: function(v) {
+            var ctx = this.ctx,
+                r = this.radius,
+                t = this.getThickness(),
+                a = this.startAngle;
+
+            ctx.save();
+            ctx.beginPath();
+
+            if (!this.reverse) {
+                ctx.arc(r, r, r - t / 2, a, a + Math.PI * 2 * v);
+            } else {
+                ctx.arc(r, r, r - t / 2, a - Math.PI * 2 * v, a);
+            }
+
+            ctx.lineWidth = t;
+            ctx.lineCap = this.lineCap;
+            ctx.strokeStyle = this.arcFill;
+            ctx.stroke();
+            ctx.restore();
+        },
+
+        /**
+         * @protected
+         * @param {number} v - Frame value
+         */
+        drawEmptyArc: function(v) {
+            var ctx = this.ctx,
+                r = this.radius,
+                t = this.getThickness(),
+                a = this.startAngle;
+
+            if (v < 1) {
+                ctx.save();
+                ctx.beginPath();
+
+                if (v <= 0) {
+                    ctx.arc(r, r, r - t / 2, 0, Math.PI * 2);
+                } else {
+                    if (!this.reverse) {
+                        ctx.arc(r, r, r - t / 2, a + Math.PI * 2 * v, a);
+                    } else {
+                        ctx.arc(r, r, r - t / 2, a, a - Math.PI * 2 * v);
+                    }
+                }
+
+                ctx.lineWidth = t;
+                ctx.strokeStyle = this.emptyFill;
+                ctx.stroke();
+                ctx.restore();
+            }
+        },
+
+        /**
+         * @protected
+         * @param {number} v - Value
+         */
+        drawAnimated: function(v) {
+            var self = this,
+                el = this.el,
+                canvas = $(this.canvas);
+
+            // stop previous animation before new "start" event is triggered
+            canvas.stop(true, false);
+            el.trigger('circle-animation-start');
+
+            canvas
+                .css({ animationProgress: 0 })
+                .animate({ animationProgress: 1 }, $.extend({}, this.animation, {
+                    step: function (animationProgress) {
+                        var stepValue = self.animationStartValue * (1 - animationProgress) + v * animationProgress;
+                        self.drawFrame(stepValue);
+                        el.trigger('circle-animation-progress', [animationProgress, stepValue]);
+                    }
+                }))
+                .promise()
+                .always(function() {
+                    // trigger on both successful & failure animation end
+                    el.trigger('circle-animation-end');
+                });
+        },
+
+        /**
+         * @protected
+         * @returns {number}
+         */
+        getThickness: function() {
+            return $.isNumeric(this.thickness) ? this.thickness : this.size / 14;
+        },
+
+        getValue: function() {
+            return this.value;
+        },
+
+        setValue: function(newValue) {
+            if (this.animation)
+                this.animationStartValue = this.lastFrameValue;
+            this.value = newValue;
+            this.draw();
+        }
+    };
+
+    //-------------------------------------------- Initiating jQuery plugin --------------------------------------------
+    $.circleProgress = {
+        // Default options (you may override them)
+        defaults: CircleProgress.prototype
+    };
+
+    // ease-in-out-cubic
+    $.easing.circleProgressEasing = function(x, t, b, c, d) {
+        if ((t /= d / 2) < 1)
+            return c / 2 * t * t * t + b;
+        return c / 2 * ((t -= 2) * t * t + 2) + b;
+    };
+
+    /**
+     * Draw animated circular progress bar.
+     *
+     * Appends <canvas> to the element or updates already appended one.
+     *
+     * If animated, throws 3 events:
+     *
+     *   - circle-animation-start(jqEvent)
+     *   - circle-animation-progress(jqEvent, animationProgress, stepValue) - multiple event;
+     *                                                                        animationProgress: from 0.0 to 1.0;
+     *                                                                        stepValue: from 0.0 to value
+     *   - circle-animation-end(jqEvent)
+     *
+     * @param configOrCommand - Config object or command name
+     *     Example: { value: 0.75, size: 50, animation: false };
+     *     you may set any public property (see above);
+     *     `animation` may be set to false;
+     *     you may use .circleProgress('widget') to get the canvas
+     *     you may use .circleProgress('value', newValue) to dynamically update the value
+     *
+     * @param commandArgument - Some commands (like 'value') may require an argument
+     */
+    $.fn.circleProgress = function(configOrCommand, commandArgument) {
+        var dataName = 'circle-progress',
+            firstInstance = this.data(dataName);
+
+        if (configOrCommand == 'widget') {
+            if (!firstInstance)
+                throw Error('Calling "widget" method on not initialized instance is forbidden');
+            return firstInstance.canvas;
+        }
+
+        if (configOrCommand == 'value') {
+            if (!firstInstance)
+                throw Error('Calling "value" method on not initialized instance is forbidden');
+            if (typeof commandArgument == 'undefined') {
+                return firstInstance.getValue();
+            } else {
+                var newValue = arguments[1];
+                return this.each(function() {
+                    $(this).data(dataName).setValue(newValue);
+                });
+            }
+        }
+
+        return this.each(function() {
+            var el = $(this),
+                instance = el.data(dataName),
+                config = $.isPlainObject(configOrCommand) ? configOrCommand : {};
+
+            if (instance) {
+                instance.init(config);
+            } else {
+                var initialConfig = $.extend({}, el.data());
+                if (typeof initialConfig.fill == 'string')
+                    initialConfig.fill = JSON.parse(initialConfig.fill);
+                if (typeof initialConfig.animation == 'string')
+                    initialConfig.animation = JSON.parse(initialConfig.animation);
+                config = $.extend(initialConfig, config);
+                config.el = el;
+                instance = new CircleProgress(config);
+                el.data(dataName, instance);
+            }
+        });
+    };
+})(jQuery);
