Implemented css working indicator

public/res/extensions/workingIndicator.js

@@ -1,42 +1,27 @@
 define([
     "jquery",
     "underscore",
-    "classes/Extension",
-    "crel"
-], function ($, _, Extension, crel) {
+    "classes/Extension"
+], function ($, _, Extension) {
 
     var workingIndicator = new Extension("workingIndicator", "Working Indicator");
 
     var $bodyElt;
     var $workingIndicatorElt;
-    var intervalId;
     workingIndicator.onAsyncRunning = function (isRunning) {
         $bodyElt.toggleClass("working", isRunning);
         $workingIndicatorElt.toggleClass("show", isRunning);
-        if(isRunning) {
-            animate();
-            intervalId = setInterval(animate, 200);
-        }
-        else {
-            clearInterval(intervalId);
-        }
     };
     
-    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'));
+        for (var i = 0; i < 4; i++) {
+            $workingIndicatorElt.append($('<div class="bar">').css({
+                'animation-delay': '0.' + (i*2) + 's',
+                '-webkit-animation-delay': '0.' + (i*2) + 's',
+            }));
         }
-        $workingIndicatorElt.append(indicatorElts);
     };
 
     return workingIndicator;

public/res/html/bodyIndex.html

@@ -28,15 +28,13 @@
 			<li id="extension-buttons"></li>
 		</ul>
 		<ul class="nav pull-right">
+			<li><div class="working-indicator"></div></li>
 			<li><a class="btn btn-success file-title-navbar" href="#"
 				title="Rename document"> </a></li>
 			<li><input type="text"
 				class="col-lg-4 form-control hide input-file-title"
 				placeholder="Document title" /></li>
 		</ul>
-		<ul class="nav pull-right">
-			<li><div class="working-indicator"></div></li>
-		</ul>
 	</div>
 </div>
 <div id="wmd-input" class="ui-layout-center"></div>

public/res/html/bodyViewer.html

@@ -26,12 +26,9 @@
 			</li>
 		</ul>
 		<ul class="nav pull-right">
+			<li><div class="working-indicator"></div></li>
 			<li><span class="file-title-navbar"></span></li>
 		</ul>
-		<ul class="nav pull-right">
-			<li><div class="working-indicator"></div></li>
-		</ul>
-
 	</div>
 </div>
 <div id="wmd-button-bar" class="hide"></div>

public/res/styles/main.less

@@ -330,19 +330,22 @@ a {
 	}
 
 	.working-indicator {
-		margin: 12px -2px 0;
-		div {
+	    overflow: hidden;
+        height: @input-height-base;
+        padding-top: 10px;
+        padding-right: 8px;
+        vertical-align: middle;
+		.bar {
 		    display: inline-block;
 		    visibility: hidden;
-		    width: 14px;
-            height: 14px;
-            border-radius: 6px;
+		    width: 8px;
+            height: 7px;
+            border-radius: 1px;
             margin: 0 2px;
-            background-color: fade(@btn-success-color, 25%);
-            .transition(~"background-color linear .15s");
-            &.highlighted {
-                background-color: fade(@btn-success-color, 75%);
-            }
+            background-color: @btn-success-color;
+            opacity: 0;
+            animation: indicator 0.6s ease-out infinite;
+            -webkit-animation: indicator 0.6s ease-out infinite; /* Safari and Chrome */
 		}
 		&.show div {
 		    visibility: visible;
@@ -350,6 +353,15 @@ a {
 	}
 }
 
+@keyframes indicator {
+    from {opacity: 1;}
+    to {opacity: 0.25;}
+}
+
+@-webkit-keyframes indicator /* Safari and Chrome */ {
+    from {opacity: 1;}
+    to {opacity: 0.25;}
+}
 
 /*********************
  * Menu/Document panels