Merge pull request #8523 from seballot/progress-for-ajax-request

Improve loading spinner display

app/webpacker/css/admin/components/progress.scss

@@ -1,28 +1,42 @@
+// Loading throbber displayed when ajax request takes too long to complete
 #progress {
-  @include border-radius(10px);
-  position: fixed;
-  top: -10px;
-  left: 50%;
-  z-index: 1000;
-  opacity: 0.8;
-  width: 200px;
-  background-color: $spree-blue;
-  color: $color-1;
   display: none;
-  font-size: 120%;
+  @include border-radius(0 0 4px 4px);
+  position: fixed;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1000;
+  background-color: $spree-blue;
+  color: #FFFFFF;
+  opacity: .8;
+  font-size: 1rem;
+  padding: .5rem 1rem;
   font-weight: bold;
-  line-height: 40px;
-  margin-left: -100px;
-  padding-top: 15px;
   text-align: center;
   text-transform: uppercase;
 
   .spinner {
-    position: absolute;
-    left: 50%;
-    width: 30px;
-    height: 30px;
-    top: -5px;
-    margin-left: -15px;
+    margin-right: 5px;
+  }
+}
+
+// Loading message replacing a table when it's loading for example
+#loading {
+  text-align: center;
+  padding: 2rem 0;
+  color: $color-4;
+
+  i {
+    font-size: 2rem;
+  }
+  img.spinner {
+    border: 0px;
+    width: 100px;
+    height: 100px;
+  }
+  h1 {
+    margin-top: 20px;
+    color: inherit;    
   }
 }

app/webpacker/css/admin/openfoodnetwork.scss

@@ -203,19 +203,6 @@ table#listing_enterprise_groups {
   }
 }
 
-#loading {
-  text-align: center;
-  img.spinner {
-    border: 0px;
-    width: 100px;
-    height: 100px;
-  }
-  h1 {
-    margin-top: 20px;
-    color: gray;
-  }
-}
-
 .field_with_errors > input {
     border-color: red;
 }

app/webpacker/css/admin/orders.scss

@@ -90,18 +90,6 @@ table.index td.actions {
   text-align: left;
 }
 
-.orders-loading {
-  margin-top: 1em;
-
-  img {
-    width: 85px;
-  }
-
-  span {
-    font-size: 1.2em;
-  }
-}
-
 .index-controls {
 
   button {