Implemented css working indicator

public/res/extensions/workingIndicator.js

@@ -2,20 +2,41 @@ define([
     "jquery",
     "underscore",
     "classes/Extension",
-], function($, _, Extension) {
+    "crel"
+], function ($, _, Extension, crel) {
 
     var workingIndicator = new Extension("workingIndicator", "Working Indicator");
 
     var $bodyElt;
     var $workingIndicatorElt;
-    workingIndicator.onAsyncRunning = function(isRunning) {
+    var intervalId;
+    workingIndicator.onAsyncRunning = function (isRunning) {
         $bodyElt.toggleClass("working", isRunning);
         $workingIndicatorElt.toggleClass("show", isRunning);
+        if(isRunning) {
+            animate();
+            intervalId = setInterval(animate, 200);
+        }
+        else {
+            clearInterval(intervalId);
+        }
     };
     
-    workingIndicator.onReady = function() {
+    var indicatorElts = [];
+    var loop = 0;
+    function animate() {
+        indicatorElts[loop].className = '';
+        loop = (loop + 1) % 3;
+        indicatorElts[loop].className = 'highlighted';
+    }
+
+    workingIndicator.onReady = function () {
         $bodyElt = $(document.body);
         $workingIndicatorElt = $(".working-indicator");
+        for (var i = 0; i < 3; i++) {
+            indicatorElts.push(crel('div'));
+        }
+        $workingIndicatorElt.append(indicatorElts);
     };
 
     return workingIndicator;

public/res/html/bodyIndex.html

@@ -35,7 +35,7 @@
 				placeholder="Document title" /></li>
 		</ul>
 		<ul class="nav pull-right">
-			<li><i class="working-indicator icon-none"></i></li>
+			<li><div class="working-indicator"></div></li>
 		</ul>
 	</div>
 </div>

public/res/html/bodyViewer.html

@@ -29,7 +29,7 @@
 			<li><span class="file-title-navbar"></span></li>
 		</ul>
 		<ul class="nav pull-right">
-			<li><i class="working-indicator icon-none"></i></li>
+			<li><div class="working-indicator"></div></li>
 		</ul>
 
 	</div>

public/res/styles/main.less

@@ -330,12 +330,22 @@ a {
 	}
 
 	.working-indicator {
-		width: 50px;
+		margin: 12px -2px 0;
-		height: 17px;
+		div {
-		background-position: 0 0;
+		    display: inline-block;
-		margin-top: 12px;
+		    visibility: hidden;
-		&.show {
+		    width: 14px;
-			.img-retina('../img/loader-default.gif', '../img/loader-default2x.gif', 50px, 17px);
+            height: 14px;
+            border-radius: 6px;
+            margin: 0 2px;
+            background-color: fade(@btn-success-color, 25%);
+            .transition(~"background-color linear .15s");
+            &.highlighted {
+                background-color: fade(@btn-success-color, 75%);
+            }
+		}
+		&.show div {
+		    visibility: visible;
 		}
 	}
 }

public/res/themes/blue-gray.less

@@ -1,7 +1,3 @@
 @import "../styles/main.less";
 
 @primary-bg: #d9dfe3;
-
-.navbar .working-indicator.show {
-	.img-retina('../img/loader-blue-gray.gif', '../img/loader-blue-gray2x.gif', 50px, 17px);
-}

public/res/themes/night.less

@@ -44,10 +44,6 @@
     .box-shadow(~"inset 0 1px 1px rgba(255, 255, 255, 0), 0 0 8px rgba(255, 255, 255, 0.75)");
 }
 
-.navbar .working-indicator.show {
-	.img-retina('../img/loader-night.gif', '../img/loader-night2x.gif', 50px, 17px);
-}
-
 .ace-tm {
 	.ace_cursor {
 		border-left-color: #fff;

public/res/themes/school.less

@@ -87,7 +87,3 @@ h1, h2, h3, h4, h5, h6 {
 	font-family: 'cursive_standardregular';
 	line-height: 34px;
 }
-
-.navbar .working-indicator.show {
-	.img-retina('../img/loader-school.gif', '../img/loader-school2x.gif', 50px, 17px);
-}