Loading Indicator for Distilled Pages

components/dom_distiller/content/resources/dom_distiller_viewer.js

Index: components/dom_distiller/content/resources/dom_distiller_viewer.js
diff --git a/components/dom_distiller/content/resources/dom_distiller_viewer.js b/components/dom_distiller/content/resources/dom_distiller_viewer.js
index 94299467ef3df0b6ffa129f1ee149d008e58eec8..ea1c5651d2f9f388aba3e6cafeb780af353638a4 100644
--- a/components/dom_distiller/content/resources/dom_distiller_viewer.js
+++ b/components/dom_distiller/content/resources/dom_distiller_viewer.js
@@ -11,6 +11,7 @@ function addToPage(html) {
 function showLoadingIndicator(isLastPage) {
   document.getElementById('loadingIndicator').className =
       isLastPage ? 'hidden' : 'visible';
+  updateLoadingIndicator(isLastPage);
 }
 
 // Maps JS theme to CSS class and then changes body class name.
@@ -26,3 +27,21 @@ function useTheme(theme) {
   }
   document.body.className = cssClass;
 }
+
+var updateLoadingIndicator = function() {
+  var colors = ["red", "yellow", "green", "blue"];
+  return function(isLastPage) {
+    if (!isLastPage && typeof this.colorShuffle == "undefined") {
+      var loader = document.getElementById("loader");
+      if (loader) {
+        var colorIndex = -1;
+        this.colorShuffle = setInterval(function() {
+          colorIndex = (colorIndex + 1) % colors.length;
+          loader.className = colors[colorIndex];
+        }, 600);
+      }
+    } else if (isLastPage && typeof this.colorShuffle != "undefined") {
+      clearInterval(this.colorShuffle);
+    }
+  };
+}();