Add spinner on poll

Add a spinner on the top middle, left of the precipitation slider,
to be shown when the scenarios are polling.

This uses a new spinner which is sleeker and faster than the usual
fa-circle-o-notch used elsewhere in the app. Eventually, all of those
should be replaced with this.

squash! Add spinner on poll

The spinner is now in the middle of the screen, rather than the top-right.

src/mmw/js/src/compare/templates/compareWindow2.html

@@ -3,6 +3,7 @@
     <div class="compare-title">
         <h1>Compare</h1>
     </div>
+    <div class="spinner hidden"></div>
     <div class="compare-close">
         <button>
             <i class="fa fa-times"></i>

src/mmw/js/src/compare/views.js

@@ -37,6 +37,7 @@ var CompareWindow2 = modalViews.ModalBaseView.extend({
         closeButton: '.compare-close > button',
         nextButton: '.compare-scenario-buttons > .btn-next-scenario',
         prevButton: '.compare-scenario-buttons > .btn-prev-scenario',
+        spinner: '.spinner',
     },
 
     events: _.defaults({
@@ -141,8 +142,10 @@ var CompareWindow2 = modalViews.ModalBaseView.extend({
 
     setPolling: function() {
         if (this.model.get('polling')) {
+            this.ui.spinner.removeClass('hidden');
             this.sectionsRegion.$el.addClass('polling');
         } else {
+            this.ui.spinner.addClass('hidden');
             this.sectionsRegion.$el.removeClass('polling');
         }
     },

src/mmw/sass/components/_spinner.scss

@@ -0,0 +1,21 @@
+.spinner:after {
+  content: '';
+  box-sizing: border-box;
+  position: absolute;
+  top: 22px;
+  right: 14px;
+  width: 20px;
+  height: 20px;
+  margin-top: -10px;
+  margin-left: -10px;
+  border-radius: 50%;
+  border: 2px solid #ccc;
+  border-top-color: #333;
+  animation: spinner-animation 0.6s linear infinite;
+}
+
+@keyframes spinner-animation {
+  to {
+    transform: rotate(360deg);
+  }
+}

src/mmw/sass/main.scss

@@ -64,6 +64,7 @@
   "components/sidebar",
   "components/global-navigation",
   "components/layerpicker",
+  "components/spinner",
   "components/slider";
 
 /**

src/mmw/sass/pages/_compare.scss

@@ -327,6 +327,12 @@ $compare-chart-table-height: calc(100vh - #{$height-lg} - #{$compare-footer-heig
     }
   }
 
+  .spinner {
+    position: absolute;
+    top: 53px;
+    right: 50%;
+  }
+
   .compare-close {
     position: absolute;
     top: 20px;