Merge pull request #6586 from Snuffleupagus/new-indeterminate-loading-bar

Create a new indeterminate loading bar animation for the default viewer

web/viewer.css

@@ -336,15 +336,13 @@ html[dir='rtl'] #toolbarContainer, .findbar, .secondaryToolbar {
 }
 
 @-webkit-keyframes progressIndeterminate {
-  0% { left: 0%; }
+  0% { left: -142px; }
-  50% { left: 100%; }
+  100% { left: 0; }
-  100% { left: 100%; }
 }
 
 @keyframes progressIndeterminate {
-  0% { left: 0%; }
+  0% { left: -142px; }
-  50% { left: 100%; }
+  100% { left: 0; }
-  100% { left: 100%; }
 }
 
 #loadingBar .progress.indeterminate {
@@ -353,19 +351,20 @@ html[dir='rtl'] #toolbarContainer, .findbar, .secondaryToolbar {
   transition: none;
 }
 
-#loadingBar .indeterminate .glimmer {
+#loadingBar .progress.indeterminate .glimmer {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
-  width: 50px;
+  width: calc(100% + 150px);
 
-  background-image: linear-gradient(to right, #999 0%, #fff 50%, #999 100%);
+  background: repeating-linear-gradient(135deg,
-  background-size: 100% 100%;
+                                        #bbb 0, #999 5px,
-  background-repeat: no-repeat;
+                                        #999 45px, #ddd 55px,
+                                        #ddd 95px, #bbb 100px);
 
-  -webkit-animation: progressIndeterminate 2s linear infinite;
+  -webkit-animation: progressIndeterminate 950ms linear infinite;
-  animation: progressIndeterminate 2s linear infinite;
+  animation: progressIndeterminate 950ms linear infinite;
 }
 
 .findbar, .secondaryToolbar {