add loading animation

Create _loader.scss

Update main.scss

Update _base.scss

Update gui.js

Update index.html

removed trailing spaces

removed trailing white spaces for real

scss/_base.scss

@@ -28,3 +28,7 @@ h5 {
 h6 {
   font-size: 0.67em;
 }
+
+.hide {
+  display: none;
+}

scss/_loader.scss

@@ -0,0 +1,23 @@
+.loader {
+  color: #000000;
+  font-size: 1.8em;
+  line-height: 2;
+  margin: 30vh auto;
+  text-align: center;
+}
+
+.spinner {
+  animation: .6s spinner ease-in-out infinite alternate;
+  border-bottom: 2px solid #000000;
+  border-radius: 50%;
+  display: inline-block;
+  height: 64px;
+  margin-top: 10px;
+  width: 64px;
+}
+
+@keyframes spinner {
+  to {
+    transform: rotate(360deg);
+  }
+}

scss/main.scss

@@ -4,6 +4,7 @@
 @import '_leaflet';
 @import '_leaflet.label';
 @import '_filters';
+@import '_loader';
 
 $minscreenwidth: 630pt;
 $sidebarwidth: 420pt;