diff --git a/public/res-min/img/loader-blue-gray.gif b/public/res-min/img/loader-blue-gray.gif
deleted file mode 100644
index b495b50e..00000000
Binary files a/public/res-min/img/loader-blue-gray.gif and /dev/null differ
diff --git a/public/res-min/img/loader-blue-gray2x.gif b/public/res-min/img/loader-blue-gray2x.gif
deleted file mode 100644
index 1206b35d..00000000
Binary files a/public/res-min/img/loader-blue-gray2x.gif and /dev/null differ
diff --git a/public/res-min/img/loader-default.gif b/public/res-min/img/loader-default.gif
deleted file mode 100644
index c05181aa..00000000
Binary files a/public/res-min/img/loader-default.gif and /dev/null differ
diff --git a/public/res-min/img/loader-default2x.gif b/public/res-min/img/loader-default2x.gif
deleted file mode 100644
index 395f947d..00000000
Binary files a/public/res-min/img/loader-default2x.gif and /dev/null differ
diff --git a/public/res-min/img/loader-night.gif b/public/res-min/img/loader-night.gif
deleted file mode 100644
index 57f85bec..00000000
Binary files a/public/res-min/img/loader-night.gif and /dev/null differ
diff --git a/public/res-min/img/loader-night2x.gif b/public/res-min/img/loader-night2x.gif
deleted file mode 100644
index 1a5cd3e3..00000000
Binary files a/public/res-min/img/loader-night2x.gif and /dev/null differ
diff --git a/public/res-min/img/loader-school.gif b/public/res-min/img/loader-school.gif
deleted file mode 100644
index 1f35fc28..00000000
Binary files a/public/res-min/img/loader-school.gif and /dev/null differ
diff --git a/public/res-min/img/loader-school2x.gif b/public/res-min/img/loader-school2x.gif
deleted file mode 100644
index 35d7b220..00000000
Binary files a/public/res-min/img/loader-school2x.gif and /dev/null differ
diff --git a/public/res/extensions/workingIndicator.js b/public/res/extensions/workingIndicator.js
index d13d83bd..8b938257 100644
--- a/public/res/extensions/workingIndicator.js
+++ b/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;
diff --git a/public/res/html/bodyIndex.html b/public/res/html/bodyIndex.html
index 5922a555..f4bf4b94 100644
--- a/public/res/html/bodyIndex.html
+++ b/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>
diff --git a/public/res/html/bodyViewer.html b/public/res/html/bodyViewer.html
index 83110c68..f6baad7e 100644
--- a/public/res/html/bodyViewer.html
+++ b/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>
diff --git a/public/res/img/loader-blue-gray.gif b/public/res/img/loader-blue-gray.gif
deleted file mode 100644
index b495b50e..00000000
Binary files a/public/res/img/loader-blue-gray.gif and /dev/null differ
diff --git a/public/res/img/loader-blue-gray2x.gif b/public/res/img/loader-blue-gray2x.gif
deleted file mode 100644
index 1206b35d..00000000
Binary files a/public/res/img/loader-blue-gray2x.gif and /dev/null differ
diff --git a/public/res/img/loader-default.gif b/public/res/img/loader-default.gif
deleted file mode 100644
index c05181aa..00000000
Binary files a/public/res/img/loader-default.gif and /dev/null differ
diff --git a/public/res/img/loader-default2x.gif b/public/res/img/loader-default2x.gif
deleted file mode 100644
index 395f947d..00000000
Binary files a/public/res/img/loader-default2x.gif and /dev/null differ
diff --git a/public/res/img/loader-night.gif b/public/res/img/loader-night.gif
deleted file mode 100644
index 57f85bec..00000000
Binary files a/public/res/img/loader-night.gif and /dev/null differ
diff --git a/public/res/img/loader-night2x.gif b/public/res/img/loader-night2x.gif
deleted file mode 100644
index 1a5cd3e3..00000000
Binary files a/public/res/img/loader-night2x.gif and /dev/null differ
diff --git a/public/res/img/loader-school.gif b/public/res/img/loader-school.gif
deleted file mode 100644
index 1f35fc28..00000000
Binary files a/public/res/img/loader-school.gif and /dev/null differ
diff --git a/public/res/img/loader-school2x.gif b/public/res/img/loader-school2x.gif
deleted file mode 100644
index 35d7b220..00000000
Binary files a/public/res/img/loader-school2x.gif and /dev/null differ
diff --git a/public/res/styles/main.less b/public/res/styles/main.less
index b6844161..a8f6920c 100644
--- a/public/res/styles/main.less
+++ b/public/res/styles/main.less
@@ -330,12 +330,22 @@ a {
 	}
 
 	.working-indicator {
-		width: 50px;
-		height: 17px;
-		background-position: 0 0;
-		margin-top: 12px;
-		&.show {
-			.img-retina('../img/loader-default.gif', '../img/loader-default2x.gif', 50px, 17px);
+		margin: 12px -2px 0;
+		div {
+		    display: inline-block;
+		    visibility: hidden;
+		    width: 14px;
+            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;
 		}
 	}
 }
diff --git a/public/res/themes/blue-gray.less b/public/res/themes/blue-gray.less
index 58a45d70..fbda2e0b 100644
--- a/public/res/themes/blue-gray.less
+++ b/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);
-}
\ No newline at end of file
diff --git a/public/res/themes/night.less b/public/res/themes/night.less
index fe074bca..decb1b45 100644
--- a/public/res/themes/night.less
+++ b/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;
diff --git a/public/res/themes/school.less b/public/res/themes/school.less
index 50494a2b..74fbd835 100644
--- a/public/res/themes/school.less
+++ b/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);
-}