Move loading spinner css for common use

network/static/css/common/_status.scss

@@ -76,3 +76,46 @@
 .btn-inactive {
     filter: opacity(45%) saturate(75%);
 }
+
+#loading {
+    display: none;
+    text-align: center;
+    color: #666;
+
+    > .spinner {
+       margin: 50px auto 0;
+    }
+}
+
+.spinner {
+    text-align: center;
+
+    > div {
+        width: 10px;
+        height: 10px;
+        background-color: #666;
+        border-radius: 100%;
+        display: inline-block;
+        animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+    }
+
+    .bounce1 {
+        animation-delay: -0.32s;
+    }
+
+    .bounce2 {
+        animation-delay: -0.16s;
+    }
+
+    @keyframes sk-bouncedelay {
+
+        0%, 80%, 100% {
+            transform: scale(0);
+        }
+
+        40% {
+            transform: scale(1);
+        }
+    }
+}
+

network/static/css/pages/_observations.scss

@@ -66,10 +66,6 @@ svg .timeline-label {
     display: inline-block;
 }
 
-#loading {
-    display: none;
-}
-
 #json-renderer {
     padding-left: 18px;
     padding-top: 3px;

network/static/css/pages/_station.scss

@@ -1,42 +1,3 @@
-#loading-image {
-    text-align: center;
-    color: #666;
-}
-
-.spinner {
-    margin: 50px auto 0;
-    width: 70px;
-    text-align: center;
-
-    > div {
-        width: 18px;
-        height: 18px;
-        background-color: #666;
-        border-radius: 100%;
-        display: inline-block;
-        animation: sk-bouncedelay 1.4s infinite ease-in-out both;
-    }
-
-    .bounce1 {
-        animation-delay: -0.32s;
-    }
-
-    .bounce2 {
-        animation-delay: -0.16s;
-    }
-
-    @keyframes sk-bouncedelay {
-
-        0%, 80%, 100% {
-            transform: scale(0);
-        }
-
-        40% {
-            transform: scale(1);
-        }
-    }
-}
-
 #success-filter,
 #elevation-filter,
 #overlap-filter {

network/static/js/station_view.js

@@ -151,7 +151,7 @@ $(document).ready(function() {
     });
 
     // Pass predictions loading
-    $('#loading-image').show();
+    $('#loading').show();
     $.ajax({
         url: '/pass_predictions/' + $('#station-info').attr('data-id') + '/',
         cache: false,
@@ -324,7 +324,7 @@ $(document).ready(function() {
             $('#prediction_results_count').html(data.nextpasses.length);
         },
         complete: function(){
-            $('#loading-image').hide();
+            $('#loading').hide();
         }
     });
 

network/templates/base/observation_new.html

@@ -204,7 +204,14 @@
             <input id="elevation-filter" type="text"/>
           </div>
         </div>
-        <div id="loading" class="notice">Calculating</div>
+        <div id="loading" class="notice">
+          <div class="spinner">
+            <div class="bounce1"></div>
+            <div class="bounce2"></div>
+            <div class="bounce3"></div>
+          </div>
+          Calculating
+        </div>
         <div id="timeline"></div>
         <div id="hover-obs">
           <div class="coloredDiv"></div>

network/templates/base/station_view.html

@@ -255,7 +255,7 @@
           {% endif %}
         </thead>
         <tbody id="pass_predictions" can_schedule="{{ can_schedule }}">
-          <tr id="loading-image">
+          <tr id="loading">
             <td colspan=7>
               <div class="spinner">
                 <div class="bounce1"></div>